Angular.js Apply CSS to one element inside ng-repeat

Question

I have the following html:

  <li ng-repeat="document in collection">
        <span ng-repeat="(key, value) in document.nestedDocument">
            <input type="text" ng-model="document.nestedDocument[key]"> 
        </span>
      <quick-datepicker ng-model="myDate"></quick-datepicker>
      <button ng-click="dateFunction($index)" class="btn btn-info">SetDate</button>
  </li>

Now how can I apply CSS to <quick-datepicker ng-model="myDate"> of only the index clicked?

e.g. I could run in the controller:

   $scope.isActive = true;

and add to my 'quick-datepicker' html:

ng-class="{true: 'active', false:'inactive'}[isActive]"

and have some CSS classes:

.active {
    color: red;
}

.inactive {
    color: black;
}

But this would color all datepicker elements inside ng-repeat. How to apply only to the one whose $index is clicked (meaning the index inside the "document in collection ng-repeat")?

Screenshot:

screen-1

Klaster_1 Нет войне · Accepted Answer · 2014-09-08 08:55:35Z

2

Given that isActive is located on each document scope, this should suffice:

ng-class="{
    active: isActive,
    inactive: !isActive
}"

If isActive is shared between all collection (i.e. on higher scope level), you can set isActive to current document instance and check for equation instead of simple boolean flag:

In dateFunction function:

$scope.isActive = collection[index]

And ng-class:

ng-class="{
    active: isActive === document,
    inactive: isActive !== document
}"

edited Sep 8, 2014 at 8:55

answered Sep 8, 2014 at 8:35

Klaster_1 Нет войне

12.2k9 gold badges65 silver badges75 bronze badges

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

2 Comments

Cloudscape Germany Over a year ago

It works! So the check "isActive === <Object object>" is a angular build-in functionality?

Klaster_1 Нет войне Over a year ago

Actually, it's just an AngularJS expression. ng-class allows to bind class name to expression, which is more intuitive that {result: class}[expression] syntax.

Collectives™ on Stack Overflow

Angular.js Apply CSS to one element inside ng-repeat

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