Menu ▼



Posted By :
avatarmrkraju
Total Views : 417

AngularJS ng-class-even and ng-class-odd example

AngularJS ng-class-even and ng-class-odd can be used with ng-repeat directive and ng-class-even will be applied to even rows and ng-class-odd will be applied to odd rows in the ng-repeat rows. In the below example bgeven class will be applied to even rows and bgodd class will be applied to odd rows of the table.

Syntax

<tr ng-repeat="department in departments" ng-class-even="{bgeven:true}" ng-class-odd="{bgodd:true}">
    <td>
        {{department.Name}}
    </td>
</tr>

Example

Department Name
{{department.Name}}

Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .tblcls
        {
            border-collapse: collapse;
        }
        .tblcls td
        {
            border: solid 1px #ccc;
            padding: 5px 10px;
        }
        .tblcls th
        {
            border: solid 1px #ccc;
            padding: 5px 10px;
            background: #B14646;
        }
        .bgeven
        {
            background: #C7C5C7;
        }
        .bgodd
        {
            background: #4685B1;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        <table class="tblcls">
            <thead>
                <tr>
                    <th>
                        Department Name
                    </th>
                </tr>
            </thead>
            <tr ng-repeat="department in departments" ng-class-even="{bgeven:true}" ng-class-odd="{bgodd:true}">
                <td>
                    {{department.Name}}
                </td>
            </tr>
        </table>
    </div>
    <script language="javascript">
        var myapp = angular.module("myApp", []);
        myapp.controller("myCntrl", function ($scope) {
            $scope.departments = [{ "Name": "Accounts" }, { "Name": "Development" }, { "Name": "Finance" }, { "Name": "HR" }, { "Name": "Testing"}];
        });
    </script>
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com