AngularJS: Update ng-repeat when checkbox state (as filter) is changed by code

Question

I have an element which get filled by ng-repeat="item in items | filter:isselected(item)".

For the filter I created checkboxes with ng-model="selecteditem[$index]" and the filter

$scope.selectedItems = [];
$scope.isselected = function(item) {
    return function(i) {
        for (var a in $scope.selectedItems) {
            if (i.name == $scope.selectedItems[i]) return true;
        }
    };
};

The checkboxes are hidden and usually triggered by clicking a <label>, but I also need to trigger them by code (I only want four checkboxes to be checked at the same time, so I created a directive that successfully checks how many are checked and unchecks the latest box if it is no. 5).
But unfortunately the filter and thus the ng-repeat items are not refreshed by changing states because the filter is evaluated by a function.

So any ideas how to solve this or work around it?

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

you use ng-click instead of jQuery's click handler

Ronnie
– Ronnie

2016-04-13 21:16:25 +00:00
Commented Apr 13, 2016 at 21:16 — Ronnie
– Ronnie, Commented Apr 13, 2016 at 21:16

Ronnie · Accepted Answer · 2016-04-13 21:23:42Z

1

So elaborating off my comment, aside from using ng-click you should start thinking of doing things the angular way and use as little jQuery as possible. Your list is being built based on the selectedItems array and setting the checkbox attr to false is not removing it from the array which is why you're still seeing it in the lis. See this updated plunkr below.

Notice, the button now uses ng-click and actually removes item2 from the array when you click the button.

http://plnkr.co/edit/2mCMZkDjmFePOWcITQ4w?p=preview

answered Apr 13, 2016 at 21:23

Ronnie

11.2k22 gold badges85 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David H. Over a year ago

Thank you! I thought so long about it that I forgot to think of the simplest things.. like removing items from the array. Meanwhile I found a solution with using checklistModel (from GitHub) which stores items into a collection.

mcgraphix · Accepted Answer · 2016-04-13 21:22:49Z

You may want to consider doing this in a different way. If you want a checkbox per item, you could use n ng-repeat to show the checkboxes and bind them to a checked property on each item. You can then either filter them using a filter on the ng-repeat or create a function in your controller that applies the filtering and returns just the selected items. Here is how you could do it.

HTML

<span ng-repeat="item in items">
  <!-- notice we are binding to the "checked" property of each item -->
  <input type="checkbox" ng-model="item.checked"/>{{$index + 1}}
</span>

<input type="button" id="btn" value="deselect 2" ng-click="clear(1)" />

<p>With the filter</p>
<ul ng-repeat="item in items | filter:isSelected(item)">
  <li>{{ item.name }}</li>
  <li>{{ item.desc }}</li>
</ul>

<p>With a getter that does the filtering</p>
<ul ng-repeat="item in getSelectedItems()">
  <li>{{ item.name }}</li>
  <li>{{ item.desc }}</li>
</ul>

Controller

        app.controller('MainCtrl', function($scope) {
        $scope.items = [
            {
                name: 'item1',
                desc: 'desc1'
            },
            {
                name: 'item2',
                desc: 'desc2'
            }
        ];

        $scope.selectedItems = [];

        //use this as a filter
        $scope.isSelected = function() {
            return function(item) {
                return item.checked;
            }
        };

        //clears one of the selections
        $scope.clear = function(index) {
            $scope.items[index].checked = false;
        };

        //use this to get just the selected items
        $scope.getSelectedItems = function() {
            return $scope.items.filter(function(item) {
                return item.checked;
            });
        };


    });

With this approach, you can programmatically add/remove checkboxes and update their checked property and the UI will update automatically.

Plunker: http://plnkr.co/edit/8bwmg9joQdO6lkUnLhvv?p=preview

I found another solution meanwhile, but your code still helps me to understand what I was trying to do ;-)

Collectives™ on Stack Overflow

AngularJS: Update ng-repeat when checkbox state (as filter) is changed by code

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related