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

时间:2018-02-01 01:12:57

标签: angularjs angularjs-ng-repeat angularjs-ng-model

我必须使用ng-repeat更新多个输入的值。我通常使用JQuery $(class / id).val()获取值并获取其值。但现在我不知道如何访问输入值,因为我每个只有一个id。 (我在表格中有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();
}

1 个答案:

答案 0 :(得分:1)

我认为你的清单是一个范围变量。因此,在控制器中定义为$ scope.list。你不需要考虑id,因为你正在使用角度代码,角度框架会为你做。

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

例如,如果您为&#34; item_name&#34;添加任何文本;在html视图的控制索引0中,变量$ scope.list [0] .item_name将自动更新,同时更改$ scope.list [0] .item_name =&#34;某些名称&#34;在控制器中将自动反映在视图中。

因此,您的给定代码可以重写如下:

views.xyz

javascript方法可以写成:

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