Angularjs ng-repeat query filter clears user-input values

Question

saleItems = [ { "id": 236, "variant": "Oval Holder", "mrp": "66.00" }, { "id": 237, "variant": "Angle Holder", "mrp": "52.00" } ]

my template looks like:

<input ng-model="$ctrl.query" /> <table> <tr><th>Sale Invoice</th></tr> <tr> <th>No.</th> <th>Item.</th> <th>Quantity</th> <th>Rate</th> <th>Discount</th> <th>Discount Amount</th> <th>Total Amount</th> </tr> <tr ng-repeat="item in $ctrl.saleItems | filter:$ctrl.query | orderBy:$ctrl.orderProp"> <td ng-init="item.total_amount=0;item.sale_quantity =0">{{$index + 1}}</a></td> <td>{{item.variant}}</td> <td><input type="text" value="{{item.sale_quantity}}"></td> <td class='amt'>{{item.mrp | currency : "₹" : 2}}</td> <td class='amt' >{{item.total_amount | currency : "₹" : 2}}</td> </tr> <tr><td>{{$ctrl.sale_total_amount()}}</td></tr> </table>

As you can see from the above template, there is an input field for item.sale_quantity. But with $ctrl.query filter on ng-repeat, if I search an item, the rows are filtered. But when the query filter is cleared, the user inputted data on the unfiltered rows is lost. How to retain the inputted data on all rows regardless of whether filtered or not?

you should initialise such property in the controller. But you can apply changes to the filtered array with this syntax: ng-repeat="i in new_array = (array | filter:... | orderBy:...)", then get values from it with new_array[$index].property — Aleksey Solovey
– Aleksey Solovey, Commented Sep 27, 2018 at 14:16
Hi i didn't think this through that time...You will have to initiliaze those value in controller when you receive response from restService. — Nawnit Sen
– Nawnit Sen, Commented Sep 27, 2018 at 14:20

NTP · Accepted Answer · 2018-09-27 14:13:44Z

you have the following init statement that clears the values of total and quantity everytime this column is rendered.

<td ng-init="item.total_amount=0;item.sale_quantity =0">{{$index + 1}}</a></td>

I suggest initialize your array inside your controller once when data is loaded using a for loop.

angular.forEach($scope.saleItems, function(value, key){ value.total_amount = 0; value.sale_quantity = 0; });

Collectives™ on Stack Overflow

Angularjs ng-repeat query filter clears user-input values

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related