CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-ng-model
Ali
Ali

Reputation: 1759

getting the updated value of inputs in ng-repeat | Angular Js

I have a inputs in a table filled out with ng-repeat, i want to be able to get the updated values by one click for all inputs.

My View:

<tr ng-repeat="sf in selectedFacture">

        // displaying default values in the input
        <td><input class="facture_item_name" ng-model="sf.facture_item_name" value="{{sf.facture_item_name}}" type="text"/></td>
        <td><input class="fcls_crt" ng-model="sf.fcls_crt" value="{{sf.fcls_crt}}"  type="number"/></td>
        <td><input class="fpiece" ng-model="sf.fpiece" value="{{sf.fpiece}}" type="number"/></td>
        <td colspan="4"><input type="text" class="form-control note" ng-model="sf.note" value="{{sf.note}}"/></td>
    <tr>
        <td ng-click="updateFacture(sf.id,sf,sf.facture_type,sf.item_id)">SUBMIT</td>
    </tr>
</tr>

JS:

// getting new values and send them to server side
$scope.updateFacture=function(id,sf,type,item_id){
        var url = '../php/history.php';
        var func = "updateFacture";

        sf = sf || {};
        var editedQuanCls= sf.fcls_crt,
        editedQuan_piece= sf.fpiece,
        editedQuan_cls_crt_gate= sf.fcls_crt_gate,
        editedQuan_piece_gate= sf.fpiece_gate,
        editedNote= sf.note;

        var data = {"function": func,
            "factureId":id,
            "item_id":item_id,
            "facture_type":facture_type,
            "editedQuanCls":editedQuanCls,
            "editedQuan_cls_crt_gate":editedQuan_cls_crt_gate,
            "editedQuan_piece":editedQuan_piece,
            "editedQuan_piece_gate":editedQuan_piece_gate,
            "editedNote":editedNote};

        var options = {
            type : "get",
            url : url,
            data: data,
            dataType: 'json',
            async : false,
            cache : false,
            success : function(response,status) {
                alert("success")
            },
            error:function(request,response,error){
                alert("errro: " + error)
            }
        };
        $.ajax(options);
    }

I tried to put the updated button in a td aside to the inputs and it works fine, but this will update each row separately, but my need is to updated them all in one click.

I'll attach a screen shot of my view.Inputs filled out with ng-repeat and the submit button is in a tr inside the (ng-repeat tr

Many Thanks in advance

Upvotes: 0

Views: 275

Answers (2)

youaremyhero
youaremyhero

Reputation: 26

<input class="facture_item_name" ng-model="sf.facture_item_name" value="{{sf.facture_item_name}}" ng-change="updateValues(sf.facture_item_name)" type="text"/>

$scope.updateValues=function(value){
$scope.sf.facture_item_name=value;
}

Upvotes: 1

DeclanMcD
DeclanMcD

Reputation: 1586

What you need is a wrapper function. First add a button on the page that covers the All option like:

 <button ng-click="updateAllFacture()">SUBMIT ALL</button>

Then add the wrapper function. All this does is loop through each item in the list and call the update function. The wrapper function would look like:

 $scope.updateAllFacture=function(){

    angular.forEach($scope.res, function(sf, index) {

      $scope.updateFacture=function(sf.id,sf,sf.facture_type,sf.item_id );

    });

  };

If you have an awful lot of items then there will be a lot of calls back to your api. Consider submitting all the inputs in the form as a post instead - then there will be just one call back, but you will need to program your controller for that.

Upvotes: 0

Related Questions