AngularJS: Add class to element when all items in list have the same value

Question

I have this fiddle: http://jsfiddle.net/j3ca/3kpoL6vg/3/

HTML:

<div ng-app>
<div ng-controller="MainCtrl">
    <div class="item" ng-repeat="item in items" ng-class="{'active': item.active}" ng-click="item.active = !item.active">{{ item.name }}</div>
<button ng-click="mark()" ng-class="{'marked': allMarked}">Mark all</button>
</div>

JS:

function MainCtrl($scope){
$scope.items = [
    { id: 1, name: 'Item 1', active: false },
    { id: 2, name: 'Item 2', active: false },
    { id: 3, name: 'Item 3', active: false },
    { id: 4, name: 'Item 4', active: false }
];

$scope.allMarked = false;
$scope.mark = function() {
    for(var i = 0; i < $scope.items.length; i++) {
        if($scope.allMarked) {
            $scope.items[i].active = false;
        } else {
            $scope.items[i].active = true;
        }
    }
    $scope.allMarked = !$scope.allMarked;

}

}

I have the following functionalities:

click on a list item changes "active" property of an item and sets its background to green if active == true;
click on Mark all button sets all list elements to "active" and changes color of the button;

What I would like to do is this:

If I manually select all items in the list the button also changes color to green;
If I click on Mark all button, but then I uncheck one item manually, the button should change its color back to red (since not all items are selected);

What I need is this basically: http://plnkr.co/edit/N98IKTcHoZMCs18FjSRF?p=preview But not with checkboxes, I need divs.

My idea is: every time i click on a link, I check (for loop) if all other items are active, but that seems like a lot of unnecessary looping :) Is there a way in angular to determine (on click) if all items in a list have the same value of a certain property? I am new to Angular, help would be much appreciated :)

Updated fiddle

I've updated my fiddle link, but that is clearly a terrible terrible solution :) Any ideas? Is there a way to check item's active value without looping on every click?

Implement the solution that you have in mind. Make it work. Then see if it causes a performance problem. If and only if it does, then start thinking about optimizations. — JB Nizet
– JB Nizet, Commented Apr 20, 2015 at 21:18

Esteban Felix · Accepted Answer · 2015-04-20 21:27:18Z

0

One option would be to check that all of the items are marked or not. Changing allMarked to something similar to this:

$scope.allMarked = function () {
    return $scope.items.every(function (item) {
        return item.active;
    });
};

An example can be seen here.

answered Apr 20, 2015 at 21:27

Esteban Felix

1,57110 silver badges21 bronze badges

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

2 Comments

j3ca Over a year ago

THAT is just a beautiful piece of code, just what I needed. I don't know if it is faster (but I don't think it will show on so little data), but it is definitely neat :) Thank you!

Esteban Felix Over a year ago

@j3ca There will be some performance issues when your list grows huge, but even then the slow down is usually due to rendering/manipulating the DOM and not the iteration on the array.

Collectives™ on Stack Overflow

AngularJS: Add class to element when all items in list have the same value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related