Getting selected element in collection with AngularJS. Declarative approach

Question

For example, I need to apply some CSS rule to one element of collection that is meant to be selected.

<div ng-repeat="fragments" ng-click="makeSelected()"></div>

$scope.fragments = [
   {id: 6379, someProperty: "someValue" },
   {id: 8934, someProperty: "someValue" },
   {id: 1654, someProperty: "someValue" },
   {id: 5654, someProperty: "someValue" }
];
$scope.selectedFragmentId = 6379;

The obvious implementation of makeSelected function is to attach a class name selected to div that was clicked then launch a loop through other elements and remove class name selected from them.

Also I need to "select" the particular div without clicking on them, only by passing id of selected fragment in some function. Obviously, this function also must have a loop that will go through fragments and will compare selectedFragmentId with every fragment ids.

My approach looks ok, but I have a bad feeling that it is so imperative instead of declarative. This is not the way in the spirit of angularjs. So, here is a question: is there a way to implement my functionallity in declarative way, without using loops?

strelok2010 · Accepted Answer · 2016-04-13 06:02:37Z

1

You don't need any loops.

<div ng-class="{selected: fragment.id == selectedFragmentId}" ng-repeat="fragment in fragments" ng-click="makeSelected()"></div>

Then, if you set $scope.selectedFragmentId, div for selected fragment automatically set class to selected

answered Apr 13, 2016 at 6:02

strelok2010

1,2668 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Getting selected element in collection with AngularJS. Declarative approach

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