Search code examples
angularjsspring-bootwebservice-client

all the data is gone in the form when i put ng-model angularjs


I want to load data of a selected row in a form in order to update it. I successfully had the data loaded in the form, the but the problem is when I use ng model to save the data all the stuff have been put in the form fields disappear.

<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
    <div class="form-body pal">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label for="refprojet" class="control-label">
                        Référence Projet *</label>
                    <input id="refprojet" type="text" value="{{loadedpr.ref_projet}}"  class="form-control" disabled ng-model="ref_projet"/>
                </div>
            </div>
            <div class="col-md-5">
                <div class="form-group">
                    <label for="intitulefr" class="control-label">
                        Intitulé *</label>
                    <input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="intitule_fr" />
                </div>
            </div>
            <div class="col-md-5">
                <div class="form-group">
                    <label for="ctot" class="control-label"> Coût Total (TND) *</label>
                    <input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="cout_total" class="form-control" disabled ng-model="cout_total" />
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="description" class="control-label">
                Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="description" class="form-control"></textarea>
        </div>
        <div class="form-actions text-center pal">
            <button type="submit" class="btn btn-primary" ng-click="upadateProjet()">Valider</button>
        </div>
    </div>
</form>

this is the angularjs method:

$scope.updateProjet= function(){
    $scope.projet={'ref_projet':$scope.refprojet,'intitule_fr':$scope.intitule_fr,'description':$scope.description,cout_total':$scope.cout_total};
    $http.put("/editprojet", $scope.projet)
    .success(function(data,status,headers,config){

    });

}

rest controller

@RequestMapping(value="/editprojet",method=RequestMethod.PUT)
public Projet editProjet(@RequestBody Projet p) {
    return projetMetier.editProjet(p);
}

Solution

  • have you tried removing the value attribute? this happened to me when I once added DOM forms on the fly, I managed by using jquery to force capture by:

    $(this).find('.inputClass').val();
    

    this sort of jequery is already embeded inside Angular so no need to add the the library.