Sunday, June 21, 2015

Angular Js $index, $odd and $even with ng-if directive

Posted by at 

<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

    <div ng-app="myApp" ng-controller="customersCtrl">

        <table>
            <tr ng-repeat="x in names">
                <td ng-if="$odd" style="background-color:#a1a1a1; color:#ffffff">
                    {{$index + 1  }}
                </td>
                <td ng-if="$even">
                    {{ $index + 1  }}
                </td>
                <td ng-if="$odd" style="background-color:#a1a1a1; color:#ffffff">
                    {{ x.Name }}
                </td>
                <td ng-if="$even">
                    {{ x.Name }}
                </td>
                <td ng-if="$odd" style="background-color:#a1a1a1; color:#ffffff">
                    {{ x.Country }}
                </td>
                <td ng-if="$even">
                    {{ x.Country }}
                </td>
            </tr>
        </table>

    </div>

    <script>
        angular.module('myApp', [])
           .factory('customersService', function ($http, $q) {
               var deferred = $q.defer();

               return {
                   getPerson: function () {
                       return $http.get("/api/Home/getperson")
                           .then(function (response) {
                               // promise is fulfilled
                               deferred.resolve(response);
                               return deferred.promise;
                           }, function (response) {
                               deferred.reject(response);
                               return deferred.promise;
                           })
                       ;
                   }
               }

           })
           .controller("customersCtrl", function ($scope, $q, customersService) {

               customersService.getPerson().then(
                       function (result) {
                           $scope.names = result.data;
                       },
                       function (error) {
                           // handle errors here
                           alert('error');
                       }
                   );
           });

    </script>

</body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)