Zvikas Peer technologies Blog : angular js

‏הצגת רשומות עם תוויות angular js. הצג את כל הרשומות

יום שבת, 6 ביולי 2013

Adding filters to ng-repeat

The following code demonstrate a simple use of filter in angulargs ng-repeat
The only part that was change from prev posts is the view

  1: <!doctype html>
  2: <html ng-app="operatorDetailsApp">
  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:        <p>Search criteria: {{opertorsFilter}}</p>     
 11:     <div ng-controller="OperatorsContoller">     
 12:       <ul >
 13:         <li ng-repeat="operator in operators|  filter:opertorsFilter">         
 14:         
 15:           <input type="checkbox" ng-model="operator.IsAvailible" ng-disabled="false">
 16:           <span >{{operator.name}}</span>         
 17:         </li>
 18:       </ul>
 19: 
 20:         <span>Availible operators:{{Availibles()}} </span>
 21:         <br />
 22:         <button ng-click="Compliment()" ng-init="SetEventChecked()">
 23:             Compliment
 24:         </button>
 25:         <span >{{LastClicked}}</span>   
 26:     </div>
 27:       <div>
 28:       Search operator : <input ng-model="opertorsFilter">
 29:       </div>
 30:   </body>
 31: </html>

The code binds the operatorFilter variable to the search list box and add the filter to the ng-repeat
The result :

Resources:
http://docs.angularjs.org/tutorial/step_03

יום שני, 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:

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

Comma separator list from check box list

I need to implement the prev jquery post using angular js.
The HTML code:

  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:         <span>Availible operators:{{Availibles()}} </span>
 19:     </div>
 20:   </body>
 21: </html>

The controller

  1: unction OperatorsContoller($scope) {
  2:     $scope.operators = [
  3:       { "name": "Zvika", IsAvailible: false },
  4:       { "name": "Lior", IsAvailible: true },
  5:       { "name": "Gal", IsAvailible: true }];
  6: 
  7:     $scope.Availibles = function () {
  8:         var RetValue = "";
  9: 
 10:         angular.forEach($scope.operators, function (pNextOperator) {
 11:             if (pNextOperator.IsAvailible == true) {
 12:                 if (RetValue != "") {
 13:                     RetValue += ",";
 14:                 }
 15:                 RetValue += pNextOperator.name;
 16:             }
 17:         }
 18:         );
 19:         return RetValue;
 20:     }
 21: }

And the Result:

יום ראשון, 9 ביוני 2013

simple angular js

Very simple angular page
The HTML 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:           <span>{{operator.name}}</span>           
 14:         </li>
 15:       </ul>
 16:     </div>
 17:   </body>
 18: </html>

The controller

  1: function OperatorsContoller($scope) {
  2:     $scope.operators = [
  3:       { "name": "Zvika" },
  4:       { "name": "Gal" }];
  5: }

The Result