CODEWITHSUNDEEP
angularjs
Mayur Randive
Mayur Randive

Reputation: 643

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>

Upvotes: 0

Views: 101

Answers (1)

Alexis
Alexis

Reputation: 5831

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

Upvotes: 2

Related Questions