Thursday, 12 November 2015

ng-class-odd

What is ng-class-odd:ng-class--odd used to apply a dynamic class, on odd element in ng-repeat ..
Description of ng-class-odd:Basically ng-class-odd is a extended/enhanced form of ng-class. limitations with ng-class-odd is that it can be used within ng-repeat directive. it has 0 priority..
Syntax of ng-class-odd:.<element ng-repeat="obj in list">
        <element ng-class-odd="'classname'"></element>
    </element>
    OR
    <table ng-repeat="obj in list">
        <tr>
        <td ng-class-odd="'bggreen'"></td>
            </tr>
    </table>
How to Use ng-class-odd/ng-class-odd Example::
Example
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-class-odd
            <br />
            <table >
                <thead>
                    <tr>
                        <th>S.No.</th>
                        <th>Name</th>
                        <th>Address</th>
                      </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="obj in list">
                        <td>{{$index+1}}</td>
                        <td ng-class-odd="'success'">{{obj.name}}</td>
                        <td>{{TextContentObj.address}}</td>
                     </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
        $scope.list = [{ name: 'abc', address: 'Delhi' }, { name: 'pqr', address: 'Kolkata' }, { name: 'xyz', address: 'Mumbai' },{name:'lmn',address:'Chennai'}];
    });

    </script>

No comments :

Post a comment