Angular JS，过滤时记住复选框状态

Question

我正在尝试创建一个带有复选框和搜索框的列表。

HTML

  <div ng-controller="MainCtrl">
    <input type="text" placeholder="Search" ng-model="query">
    <div ng-repeat="item in items | filter:query">
      <input type="checkbox" id="{{item.id}}" value="{{item.id}}">{{item.name}}
    </div>
  </div>

JS

myApp.controller('MainCtrl', function ($scope) {
  $scope.items = [
    {
      "id": 1,
      "name": "Green",
    },
    {
      "id": 2,
      "name": "Yellow",
    },
    {
      "id": 3,
      "name": "Blue",
    },
    {
      "id": 4,
      "name": "Red",
    }
  ];
});

问题是当我通过搜索框进行搜索时，复选框状态没有保存。例如，当我选中 "Green" 时，我在文本框中输入了其他内容，然后删除了该文本，不再选中选中的 "Green"。我怎样才能在复选框状态上设置 "memory"？

这里是一个 link 的 plunker：http://plnkr.co/edit/KHq3AA4guGKA4AqxQrF8

Answer 1

将 ng-model="item.checked" 附加到复选框，例如：

<input type="checkbox" ng-model="item.checked" id="{{item.id}}" value="{{item.id}}">{{item.name}}

看到这个plunker

Answer 2

我建议您在每个 items 数组中再添加一个属性 item，这样可以作为 item.checked

访问

标记

  <div ng-controller="MainCtrl">
    <input type="text" placeholder="Search" ng-model="query">
    <div ng-repeat="item in items | filter:query">
      <input type="checkbox" ng-model="item.checked">{{item.name}}
    </div>
  </div>

Working Plunkr

Angular JS，过滤时记住复选框状态

Angular JS, remember checkbox status when filtering

checkbox

angularjs

ng-repeat

angularjs-filter