Question

我创建了一个选择窗口，看看附加插件中的第一个场景没有搜索我正确地能够从两个列表中进行选择和取消选择，但是一旦我使用搜索并尝试选择已过滤的选项，那么它就会中断。请有人在这里帮助我。我是角色的新手，并创建了关于角度的不同用法的小教程。

http://plnkr.co/edit/jCY0O7Mca5xbmMlGb1Hy?p=preview

 <div class="container-fluid">
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h4>Available options</h4>
    <input type="text" ng-model="searchGroup" placeholder="Search">
    <div ng-repeat="item in itemList | filter:searchGroup ">
      <mark>{{item.name}}</mark>
      <input type="checkbox" ng-model="modelContainer[$index].checked" />
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h4 class="text-success">Selected options</h4>
    <ul>
      <li ng-repeat="item in modelContainer | filter: {checked:true}">
        {{item.item.name}} <a href="#" class="cl" ng-click="uncheck(item.item.id)">X</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

我做了一些修改，你可以轻松地做到这一点：

只使用一个列表，在您的对象上再添加一个属性：checked。

之后，您只需在HTML中更改此属性的值

即可

<强> HTML

<h3>First Scenario <small>Handling JSON source </small></h3>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <h4>Available options</h4>
        <input type="text" ng-model="searchGroup" placeholder="Search">
        <div ng-repeat="item in itemList  | filter:searchGroup ">
          <mark>{{item.name}}</mark>
          <input type="checkbox" ng-model="item.checked" ng-click="item.checked=!item.checked" />
        </div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <h4 class="text-success">Selected options</h4>
        <ul>
          <li ng-repeat="item in itemList | filter: {checked:true} ">
            {{item.name}} <a href="#" class="cl" ng-click="item.checked=false">X</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

<强> JS

  $scope.itemList = [{
    id: "1",
    name: "first item",
    checked: false
  }, {
    id: "2",
    name: "second item",
    checked: false
  }, {
    id: "3",
    name: "third item",
    checked: false
  }];

Working DEMO

复选框 - 使用过滤器在角度JS中搜索后中断

1 个答案: