Question

我在HTML5视图中调用了两次相同的列表。

<div class="list" data-ng-repeat="item in model.items">
    <div class=list-item">
       {{ item.name }} 
        <a data-ng-click="addToList(item)">
            <span data-ng-hide="item.checked">Add</span>
            <span data-ng-show="item.checked">Remove</span>
        </a>
    </div>
</div>

<div class="checkbox-list" data-ng-repeat="item in model.items">
    <div class=list-item">
       <input type="checkbox" data-ng-checked="item.checked" data-ng-click="addToList(item)" />
       {{ item.name }} 
    </div>
</div>

在我的控制器中，我正在使用范围中定义的方法：

function addToList(item) {
    item.checked = !item.checked;

    for (var i = 0; i < this.$scope.items.length; i++) {
        if (this.$scope.items.id == item.id) {
            this.$scope.items[i] = item;
            break;
        }
    }
}

单击Add或Remove按钮时，列表会有更新，但复选框列表项不会被检查。

另一方面，当checking一个checkbox时，列表无法获得更新。

我怎样才能实现这一目标？

Answer 1

看起来您使用的是controller as语法。

所以在你的js代码中将模型添加到控制器本身（假设你yourController指向控制器，你在控制器中有你的方法）：

  for (var i = 0; i < yourController.items.length; i++) {
    if (yourController.items.id == item.id) {
        yourController.items[i] = extension;
        break;
    }
  }

内部YourController声明：

var yourController = this;

然后在声明控制器的HTML中，按如下方式声明：

 ng-controller = "YourController as yourController"

然后您可以访问HTML中的项目：

yourController.items

Answer 2

您正在将javascript函数声明语法与angular

混合使用

使用angular时，您应该始终使用angular语法来获得模型和视图之间同步的好处。 $ scope.addToList = function（）{}

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  
  $scope.model = {};
  
  $scope.model.items = [{"name":"one"},{"name":"two"}]
  
  
  $scope.addToList = function(item) {
    item.checked = !item.checked;
  }
  
  
  
});

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <div class="list" data-ng-repeat="item in model.items">
    <div class="list-item">
       {{ item.name }} 
        <a data-ng-click="addToList(item)">
            <span data-ng-hide="item.checked">Add</span>
            <span data-ng-show="item.checked">Remove</span>
        </a>
    </div>
    </div>

<div class="checkbox-list" data-ng-repeat="item in model.items">
    <div class="list-item">
       <input type="checkbox" data-ng-checked="item.checked" data-ng-click="addToList(item)" />
       {{ item.name }} 
    </div>
</div>


    
    
  </body>

</html>

Answer 3

您没有使用$ scope函数。这可能会有所帮助：

$scope.addToList = function (item) {
    item.checked = !item.checked;

    for (var i = 0; i < $scope.items.length; i++) {
        if ($scope.items.id == item.id) {
            $scope.items[i] = extension;
            break;
        }
    }
}

AngularJS操纵两个ng-repeat

3 个答案: