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

Question

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>

what do you mean by it is breaking ? i don't see any problem with the plunkr — MayK
– MayK, Commented Jun 1, 2016 at 6:54
select "second item" by entering it into to text-box and check it out .. you will see first-item will appear into the selected list.. then clear the text entered into the text box .. let me know if you still not able to find the issue. — Mayur Randive
– Mayur Randive, Commented Jun 1, 2016 at 7:01
Actually i want to send selection for next API call , so i thought its better to have two . — Mayur Randive
– Mayur Randive, Commented Jun 1, 2016 at 7:15
Look at my answer, it works good with only one. Better to not duplicate informations. — Alexis
– Alexis, Commented Jun 1, 2016 at 7:16

Alexis · Accepted Answer · 2016-06-01 07:11:18Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related