CODEWITHSUNDEEP
angularjs
Stephan K.
Stephan K.

Reputation: 15752

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

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

Upvotes: 1

Views: 1655

Answers (1)

Klaster_1 Нет войне
Klaster_1 Нет войне

Reputation: 12156

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
}"

Upvotes: 2

Related Questions