Mayur Randive Mayur Randive - 6 months ago 16
AngularJS Question

checkbox - is breaking after using filter to search in angular JS

I have created a selection window , have a look at first scenario in attached plunk
Without searching i am correctly able to do the select and deselect from both lists, but as soon as I use search and try to select the filtered option then it is breaking. can someone please help me here.
I am new to angular and creating small tutorial on different usage of angular.

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

I've make some modification, you can do this easily :

Use only one list, with one more property on your object : checked.

After that you can just change in the HTML the value of this property

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