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

  1. AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
  2. .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.
  3. 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.
  4. The ng-controller=”ngclassevenCtrl” is an AngularJS directive. It is used to define a controller name as “ngclassevenCtrl”.
  5. 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.
  6. The {{x.tut}} is used to bind the tut value from a technology array.
  7. The angular.module function is used to create a Module.
  8. 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.
  9. 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:

    Sample Output for AngularJS ngclasseven

  1. 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.


Related Searches to angularjs ngclasseven directive