Monday, 7 January 2019

AngularJS ng-class-even Directive


AngularJS ng-class-even Directive

ng-class-even directive is same as ng-class to add one or more css to html. It can be use with ng-repeat to apply css on even rows. It is styling directive and useful for design purpose.

Example:-
<!DOCTYPE html>
<html>
<head>
    <title>ng-class Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <style>
        .even-row {
            color: white;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div ng-app="myApp1" ng-controller="Employee1Controller">
        <table>
            <thead>
                <tr>
                    <th>Days</th>
                    <th>Available Time</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in weekData" ng-class-even="'even-row'">
                    <td>{{item.day}}</td>
                    <td>{{item.hours}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
                var myapp = angular.module('myApp1', []);
                myapp.controller('Employee1Controller', function ($scope) {
                    $scope.weekData = [{ day: "Friday", hours: "5:00pm to 12:00am" },
                                       { day: "Wednesday", hours: "5:00pm to 11:00pm" },
                                       { day: "Sunday", hours: "11:00am to 11:00pm" },
                                       { day: "Thursday", hours: "5:00pm to 11:00pm" },
                                       { day: "Saturday", hours: "11:00am to 12:00am" }
                    ];

                });
    </script>
</body>
</html>

OutPut:-