AngularJS ngclasseven

ng-class-even directive is used to dynamically set one or more CSS classes to an HTML element, but will take effect only on every even appearance of the HTML element.
The ng-class-even directive will only work, when the ng-repeat directive is existing in same HTML element.
All HTML elements supported the ng-class-even directive. But the ng-class-even directive is perfect for styling items in list or rows in a table.

Syntax for ng-class-even directive in AngularJS:

<element ng-repeat="x in data" ng-class-even="expression" > </element>

Parameter value for ng-class-even directive in AngularJS:

Value	Description
expression	It is used to define an expression that returns one or more class names.

Sample coding for ng-class-even directive in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                angular.min.js"></script>
        <style>
            .striped {
                background-color:skyblue;
                width:100px;
            }

        </style>       
    </head>
    <body ng-app="myApp">
        <h2>Wikitechy ng-class-even directive in AngularJs</h2>
        <ul ng-controller="ngclassevenCtrl"> 
             <li ng-repeat="x in technology" ng-class-even=" 'striped'"> 
                {{x.tut}}
             <li> 
        <ul> 
        <script>
            var app =angular.module("myApp", []);
            app.controller("ngclassevenCtrl", function($scope) {
                $scope.technology = [ 
                    {"tut":"HTML"}, 
                    {"tut":"AngularJS"},
                    {"tut":"CSS"}, 
                    {"tut":"C"}, 
                    {"tut":"JAVA"}, 
                    {"tut":"PHP"}, 
                ];
            });
        </script>
    </body>
</html>

Code Explanation for ng-class-even directive in AngularJS:

Code Explanation for AngularJS ngclasseven

AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
.striped {background-color: skyblue; width:100 px}is used to define a CSS class as stripedwhich is used to set the <li>element’s even item background color as skyblue with 100 pixels width.
The AngularJS application is defined by ng-app="myApp". The application runs inside the <body> tag.It’s also used to define a <body> tag as a root element.
The ng-controller=”ngclassevenCtrl” is an AngularJS directive. It is used to define a controller name as “ngclassevenCtrl”.
The <li ng-repeat="x in technology" ng-class-even=" 'striped' ">, here the <li> elements defined ng-repeat and ng-class-even directives. Because the ng-class-even directive only work with ng-repeat directive. The ng-class-even directive is used to dynamically set striped CSS classes to an <li> element, but will take effect only on every even appearance of the <li> element.
The {{x.tut}} is used to bind the tut value from a technology array.
The angular.module function is used to create a Module.
Here we have declared a controller ngclassevenCtrl module using app.controller() function. The value of the controller modules is stored in scope object. In AngularJS, $scope is passed as first argument to app.controller during its constructor definition.
Here we have set the value of $scope.technology=[ {"tut":"HTML"}, {"tut":"AngularJS"}, {"tut":"CSS"}, {"tut":"C"}, {"tut":"JAVA"}, {"tut":"PHP"}, ]; });

Sample Output for ng-class-even directive in AngularJS:

The output displays the technology array items. And every even item in technology array is displayed with skyblue color background by using the ng-class-even directive.

PDF

AngularJS ngclasseven

Syntax for ng-class-even directive in AngularJS:

Parameter value for ng-class-even directive in AngularJS:

Sample coding for ng-class-even directive in AngularJS:

Code Explanation for ng-class-even directive in AngularJS:

Sample Output for ng-class-even directive in AngularJS:

Related Searches to angularjs ngclasseven directive

Wikitechy

Join our Community

Other Languages