更新由 ng-repeat | 填写的输入值Angular js

Question

我必须使用 ng-repeat 更新多个输入的值。我通常使用 JQuery $(class/id).val() 获取值并获取其值。但现在我不知道如何访问输入值，因为每个输入值只有一个 ID。（我在 table 中有 20 个输入）

查看：

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

我希望将所有值存储在一个数组中，但我得到的只是第一行的值。

JS:

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

Answer 1

我认为你的列表是一个范围变量。因此，在控制器中它被定义为 $scope.list。您在使用 angular 代码时无需考虑 id，angular 框架会为您完成。

由于您使用了 ng-model 的双向数据绑定，因此对绑定变量的任何更改都将立即对控制器和 html 视图可见。使用 ng-model 确保立即更新 $scope.list 变量。

例如，如果您在 html 视图的控件索引 0 中添加 "item_name" 的任何文本，变量 $scope.list[0].item_name 将会自动更新，控制器中 $scope.list[0].item_name = "Some name" 的变化也会自动反映在视图中。

因此，您给定的代码可以重写如下：

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

javascript方法可以写成：

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

更新由 ng-repeat | 填写的输入值Angular js

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

angularjs

angularjs-ng-repeat

angularjs-ng-model