highlight first,middle,last with ng-class

Browse more Angularjs Examples

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <script>
        var app = angular.module('testApp', []);
        app.controller('CtrlOne', ['$scope', function($scope){
            $scope.students = ["Tanveer","Ehtesham","Rizwan","Salman","Atif","Kashif"];
            $scope.dynamicClasses = "{ 'first': $first, 'middle': $middle, 'last': $last, 'odd':$odd, 'even':$even}";
        }])

    </script>
    <style>
        .first{
            color:green;
        }
        .middle{
            color:grey;
        }
        .last{
            color:red;
        }
    </style>
  </head>
  <body ng-app="testApp">
    <div ng-controller="CtrlOne">
        <p ng-repeat="student in students" ng-class="{{dynamicClasses}}">{{student}}</p>
    </div>
    
  </body>
</html>

highlight first,middle,last with ng-class

Follow

Newsletter