Angularjs ng-model的动态名称

时间:2018-01-12 10:09:42

标签: html angularjs angularjs-ng-repeat angular-ngmodel

我正在使用AngularJS并使用ng-repeat块。我想使用唯一/动态ng-model名称。这段代码的想法是,当我点击buttom时,我增加了文本框的值。参数的名称在调试器中是正确的,但值不会更改。下面是我使用的代码,但它不起作用,我找不到原因。有人可以帮帮我吗?

<tr ng-repeat="item in resultShoppingCart track by $index">
   <td class="price" ng-bind="item.unitPrice"><span></span></td>
   <td class="qty">
      <input class="form-control input-sm" type="text" ng-value="item.quantity" ng-model="Qty['{{$index}}']">
      <a href=""><i class="fa fa-plus" ng-click="addQuantity(item.quantity, item.productId, $index)"></i></a> <a href="#"><i class="fa fa-minus"></i></a>
   </td>
   <td class="price" ng-bind="item.price"><span>$99.00</span></td>
   <td class="action"><a ng-click="delete(userId,item.productId)">Delete item</a></td>
</tr>

我的控制员。

$scope.addQuantity = function (currentQuantity, productId, i) {          
          $scope["Qty['" + i + "']"] = currentQuantity + 1;
          alert($scope["Qty['" + i + "']"]);          
      }

1 个答案:

答案 0 :(得分:2)

由于'{{$index}}'表达式的结果将是'{{$index}}'本身。因此,您必须将表达式更改为Qty[$index],而不是在Qty['{{$index}}']内使用ng-model,以便插值将对其进行正确评估。

但我建议使用item.quantity,这最终将是独一无二的。无需保持单独的对象(因此我没有看到任何原因单独保存数量)。

<td class="qty">                            
    <input class="form-control input-sm" type="text" ng-value="item.quantity" ng-model="item.quantity" >
    <a href=""><i class="fa fa-plus" ng-click="addQuantity(item)"></i></a> <a href="#"><i class="fa fa-minus"></i></a>                            
</td>

<强>代码

$scope.addQuantity = function (item) {          
    item.quantity = item.quantity + 1;
}