CODEWITHSUNDEEP
angularjs
Saurabh Pakhare
Saurabh Pakhare

Reputation: 701

Change the style of particular elements of an array inside ng-repeat in AngularJs

E.g I have an array of text like $scope.array = [{text:'abc'}, {text:'pqr'}, {text:'xyz'}]; Now along with ng-repeat I want to change the colour of the text of any particular element of the array. how to achieve it?

Upvotes: 3

Views: 7683

Answers (3)

NunoM
NunoM

Reputation: 313

You can achieve this by using directives such as ngClass or ngStyle, to apply classes or style changes conditionally to certain HTML elements.

Let's assume you're listing your $scope.array elements:

<ul>
    <li ng-repeat="element in array">{{element.text}}</li>
</ul>

You could add a class called .red (that would change the text color to red) to an element if text === 'pqr', but changing the above example to:

<ul>
    <li ng-repeat="element in array" ng-class="{'red': element.text === 'pqr'}">{{element.text}}</li>
</ul>

Similarly you can also use the directive ng-style to apply a style directly, avoiding new classes. Since you're using an ngRepeat, you can also its iterator $index to apply classes/styles on more advanced cases such as first/last element, element index is odd/even, etc...

For more examples and clarifications, please check the official documentation for both directives:

Upvotes: 3

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

IMO, we've multiple options to achieve that.

If you want to change single property then you can use ng-style but let say if you want to manipulate multiple properties then its preferable to use ng-class.

ng-style

The ngStyle directive allows you to set CSS style on an HTML element conditionally.

<div ng-repeat="contact in jsonContacts">
    <span ng-style="{'color':($first ?'red':'blue')}">{{data.row}}</span>
</div>

ng-class

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

<div ng-repeat="i in array" ng-class="{'green': $last, 'blue': $first}">
    {{i.text}}
</div>

FYI,

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

$first boolean true if the repeated element is first in the iterator.

$middle boolean true if the repeated element is between the first and last in the iterator.

$last boolean true if the repeated element is last in the iterator.

Official documentations

ngRepeat

ngClass

ngStyle

Hope this helps you :)

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {
  $scope.array = [{text:'abc'}, {text:'pqr'}, {text:'xyz'}];
});
.green
{
  color: green;
}
.blue
{
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">
    <h3>ng-style used</h3>
    
    <div ng-repeat="i in array" ng-style="{'color':($first ?'red':'blue')}">{{i.text}}</div>
    
    <br/>
    <h3>ng-class used</h3>
  <div ng-repeat="i in array" ng-class="{'green': $last, 'blue': $first}">{{i.text}}</div>
  </div>
  
  </div>
</div>

Upvotes: 6

taguenizy
taguenizy

Reputation: 2265

You can use ng-class or ng-style, even including an auxiliar function in your controller to calculate that style.

<div ng-repeat="item in array" ng-class="calculateClass(item)" ng-style="calculateStyle(item)">
    <!-- more stuff -->
</div>

EDIT

For your case it could be useful depending on what logic you want to apply to do something like

$scope.calculateStyle = function(item){
    var color;
    // Some logic to define color
    return {
        'color': color
    }
}

Upvotes: 0

Related Questions