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

Question

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.

Many Thanks in advance

I think always update only last row whenever you click on submit button. am I right? — Sandeep
– Sandeep, Commented Feb 1, 2018 at 6:22
@Sandeep yes exactly, ithought i will get the data and store them in an array, but i am only getting the first row, how can i get them all? — Ali
– Ali, Commented Feb 1, 2018 at 9:30
@IsraGab usually i got the value with jQuery class/id > $(class/id).val() but now i am confused how to get them all when i only have one id for each row and the row are auto generated anf filled with angular js ng-repeat — Ali
– Ali, Commented Feb 1, 2018 at 9:32

youaremyhero · Accepted Answer · 2018-02-12 06:24:08Z

1

<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;
}

answered Feb 12, 2018 at 6:24

youaremyhero

262 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DeclanMcD · Accepted Answer · 2018-02-01 11:43:33Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related