יום שני, 24 ביוני 2013

button ng-click

The view:
  1: <!doctype html>


  2: <html ng-app>


  3:   <head>


  4:     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>


  5:     <script src="operators.js"></script>


  6:     <link rel="stylesheet" href="operators.css">


  7:   </head>


  8:   <body>


  9:     <h2>Operators</h2>     


 10:     <div ng-controller="OperatorsContoller">     


 11:       <ul >


 12:         <li ng-repeat="operator in operators">         


 13:         


 14:           <input type="checkbox" ng-model="operator.IsAvailible" ng-disabled="false">


 15:           <span >{{operator.name}}</span>         


 16:         </li>


 17:       </ul>


 18: 


 19:         <span>Availible operators:{{Availibles()}} </span>


 20:         <br />


 21:         <button ng-click="Compliment()" ng-init="SetEventChecked()">


 22:             Compliment


 23:         </button>


 24:         <span >{{LastClicked}}</span>   


 25:     </div>


 26:   </body>


 27: </html>

The controller

  1: function OperatorsContoller($scope) {


  2:  


  3:     $scope.LastClicked = 1;


  4:     $scope.operators = [


  5:       { "name": "Zvika", IsAvailible: false },


  6:       { "name": "Lior", IsAvailible: true },


  7:       { "name": "Shaaf", IsAvailible: true },


  8:       { "name": "Gal", IsAvailible: true }];


  9: 


 10:     $scope.Availibles = function () {


 11:         var RetValue = "";


 12: 


 13:         angular.forEach($scope.operators, function (pNextOperator) {


 14:             if (pNextOperator.IsAvailible == true) {


 15:                 if (RetValue != "") {


 16:                     RetValue += ",";


 17:                 }


 18:                 RetValue += pNextOperator.name;


 19:             }


 20:         }


 21:         );


 22:         return RetValue;


 23:     }


 24:     $scope.Compliment = function () {


 25:         var theCount = $scope.operators.length;


 26: 


 27:         for (var next = 0 ; next < theCount ; next++) {


 28:             if (next % 2 == $scope.LastClicked) {


 29:                 $scope.operators[next].IsAvailible = true;


 30:             }


 31:             else {


 32:                 $scope.operators[next].IsAvailible = false;


 33:             }


 34: 


 35:         }


 36:             if ($scope.LastClicked == 0)


 37:                 $scope.LastClicked = 1;


 38:             else


 39:                 $scope.LastClicked = 0;


 40:     }


 41:     $scope.SetEventChecked = function () {


 42:         var theCount = $scope.operators.length;


 43: 


 44:         for (var next = 0 ; next < theCount ; next++) {


 45:             if (next % 2 == $scope.LastClicked ) {


 46:                 $scope.operators[next].IsAvailible = true;


 47:             }


 48:             else {


 49:                 $scope.operators[next].IsAvailible = false;


 50:             }


 51:         }


 52:     }


 53: 


 54: }
and the Result:


ב-
תוויות:

אין תגובות:

הוסף רשומת תגובה

הירשם ל- תגובות לפרסום (Atom)