双向绑定不适用于ng重复

two way binding not working with ng-repeat

本文关键字：ng 重复 适用于 不适用 绑定      更新时间：2023-09-26

我有一个简单的ng重复列表，其中我将当前列表项值分配给控制器上的另一个属性，如下所示：

  <li ng-repeat="num in list">
    <input type="text" ng-init="value = num" ng-model="value" />
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button>
  </li>

但是，当我单击"保存"按钮时，我会为$scope.value设置默认值。我希望显示特定输入文本的值。

这是控制器：

 angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = false;
      $scope.list = [0, 1, 2, 3, 4];
      
      $scope.save = function() {
         alert($scope.value);
      }
    });

如何在保存函数调用时访问控制器中输入项的更新值。

这是相同的plunker：plnkr

更新：我希望在不将值作为参数传递的情况下将其获取到控制器。

哇，我不敢相信大多数人都错过了这个。如果您使用的是Angular 1.2，那么您肯定应该在ngRepeat指令中检查track by关键字。

<li ng-repeat="num in list track by $index">
    <input type="text" ng-model="list[$index]" />
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button>
</li>

底线是在绑定时远离基元类型，因为这会给您带来同步问题。

同学们，请花更多的时间和精力研究你的解决方案，而不仅仅是发布积分。

希望这能有所帮助！

ngRepeat创建一个作用域，因此，对象通过引用传递，并通过值进行编号。你的代码有问题，如果你成功地更新了值，它会更新ng中的所有数字。你可以这样做：

html

    {{value.val}} <!-- for check the value -->
<li ng-repeat="num in list">
    <input type="text" ng-model="num" />
    <button type="button" class="btn btn-primary" ng-click="value.val=num">Save</button>
  </li>

javascript

angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = {val:false};
      $scope.list = [0,1,2,3,4];
});

http://jsfiddle.net/oq6zdeLd/

我很抱歉我的英语。。。

这里是如何实现

<li ng-repeat="num in list">
    <input type="text" ng-init="value = num" ng-model="value" />
    <button type="button" class="btn btn-primary" ng-click="save(value)">Save</button>
  </li>

angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = false;
      $scope.list = [0, 1, 2, 3, 4];
      $scope.save = function(argument) {
         $scope.value = argument;
         alert($scope.value);
      }
    });

我们不要滥用表达式"双向绑定"；）

您的控制器有一个作用域，而该作用域中只有一个$scope.value。不能强制is同时具有多个值。

CCD_ 3为每个CCD_ 4创建新的作用域。即使您尝试使用$parent.value，控制器的$scope.value也只能在ng-init 中具有最后一个赋值

在这种情况下，最好将值作为参数传递。希望这有助于进一步解释这个问题。如果我错了，请纠正我。

相关文章：