Updating input values filled out by ng-repeat | Angular js

Question

I have to update the value of multiple Inputs using ng-repeat. i usually get the value with JQuery $(class/id).val() and get its value. but now i have no idea how to access the input values since i only have one id for each. (i have like 20 input in the table)

View:

<tr ng-repeat="i in list">

        <td><input list="itemNames" class="item_name" ng-model="i.item_name" value="{{i.item_name}}" type="text"/></td>

        <datalist id="itemNames">
           <option ng-repeat="ii in list" class="idI" ng-model="ii.idI"  data-item="{{ii.idI}}" value="{{ii.item_name}} {{ii.idI}}">
        </datalist>

        <td><input class="quantity" ng-model="i.quantity" value="{{i.quantity}}"  type="number"/></td>

        <td><input class="price" ng-model="i.price" value="{{i.price}}" type="number"/></td>
    <tr>
        <td ng-click="updateAll()">UPDATE</td>
    </tr>

</tr>

I expect to store all values in an arrays, but what i got is only values of the first row.

JS:

$scope.updateAll=function(){
    // getting vallues
    var item_name=$(".item_name").val();
    var quantity=$(".quantity").val();
    var price=$(".price").val();
}

I. Ahmed · Accepted Answer · 2018-02-02 04:14:07Z

2

I think your list is a scope variable. So, in controller its defined as $scope.list. You need not to think about id as you are using angular code, angular framework will do it for you.

As you used the two way data binding with ng-model, so any change to the bind variable will be immediately visible to controller and html view. The use of ng-model ensures the immediate update to the $scope.list variable.

For example, if you add any text for "item_name" in the control index 0 from html view, the variable $scope.list[0].item_name will be automatically updated, also the change in $scope.list[0].item_name = "Some name" in controller will be automatically reflected in the view.

So, your given code can be re-written as following:

<tr ng-repeat="i in list">
    <td><input list="itemNames_{{$index}}" class="item_name" id="txt_name_{{$index}}" ng-model="selectedValue" ng-change = "getSelectedId(selectedValue, $index)"  type="text"/></td>
    <datalist id="itemNames_{{$index}}">
       <option ng-repeat="ii in list" class="idI" ng-model="ii.idI"  data-item="{{ii.idI}}" value="{{ii.item_name}} {{ii.idI}}">
    </datalist>
    <td><input class="quantity" ng-model="i.quantity" value="{{i.quantity}}"  type="number"/></td>
    <td><input class="price" ng-model="i.price" value="{{i.price}}" type="number"/></td>
<tr>
    <td ng-click="updateAll()">UPDATE</td>
</tr>

The javascript method can be written as:

var getSelectedId = function(selectedValue, index) {
      var val = document.getElementById('txt_name_' + index).value;
      var text = $('#itemNames_' + index).find('option[value="' + val + '"]').attr('data-item');
      alert(text);
}

edited Feb 2, 2018 at 4:14

answered Feb 1, 2018 at 1:38

I. Ahmed

2,5261 gold badge14 silver badges30 bronze badges

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

4 Comments

Ali Over a year ago

This is awesome! but my problem is that i have a datalist, i am getting the item name correctly but how to get the id? i'll update the the question

I. Ahmed Over a year ago

You want get Id of data list?

Ali Over a year ago

yes i want to get the id of the selected item_name, i sotred it in the option as data-item=ii.idi

I. Ahmed Over a year ago

Updated code added, if you need any more support provide the plnkr.co link.

Collectives™ on Stack Overflow

Updating input values filled out by ng-repeat | Angular js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related