Sunday, September 25, 2016

Angular.js

W3-Angular
Angular-API reference
Angular-Tutorial
Angular-Developer guide
Angular-IE Compatability


Table sorting


1.) Click the table headers to change the sorting order
2.) Do clicks and right-clicks!
3.) Remove "| filter:test" form the row (tr) declaration if you don't want filtering.
test filters on all columns, to filter on one specific column, say on column "name", specify test.name/test.country
Filter:

Name Country
{{x.name}} {{x.country}}


// https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js
// https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js.map
<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" style="width: 300px;"><tbody>
<tr> <th ng-click="orderByMe('name')">Name</th> <th ng-click="orderByMe('country')">Country</th> </tr>
<tr ng-click="rowclick()" ng-right-click="rightclick()" ng-repeat="x in names | orderBy:propertyName:reverse"> <td>{{x.name}}</td> <td>{{x.country}}</td> </tr>
</tbody></table>

</div>

<script>
var app = angular.module('myApp', []).controller('namesCtrl', function($scope) {

    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];
     
 
  $scope.propertyName = 'name';
  $scope.reverse = true;

    $scope.orderByMe = function(propertyName ) {
       $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
       $scope.propertyName = propertyName;
   }

  $scope.rowclick= function(){ 
    alert(this.x.country);
 }

  $scope.rightclick= function(scope,evt){
   alert(this.x.name);
  }

});

// when you want to apply the directive on an html element, you have to write, i.e.: <span ng-right-click>
// when you create the directive you have to use camelCase !!! - see example below:

app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
                event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
});

</script>



Using an object as a filter:



<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
   
    <link rel="stylesheet" href="style.css" />
        <script>
    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {});
    </script>
  </head>

  <body ng-controller="MainCtrl">

    <div ng-init="users = [{name:'John', phone:'555-1276', secret:'shhh'},
                           {name:'Mary', phone:'800-BIG-MARY', secret:'psst'},
                           {name:'Mike', phone:'555-4321', secret:'shhh'},
                           {name:'Adam', phone:'555-5678', secret:'shhh'},
                           {name:'Julie', phone:'555-8765', secret:'shhh'}]"></div>
    Name: <input ng-model="search.name"/><br>
    Phone: <input ng-model="search.phone"/><br>
    Secret: <input ng-model="search.secret"/><br>
    <table>
                                                 // anonymous object !
        <tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">
            <td>{{user.name}}</td>
            <td>{{user.phone}}</td>
            <td>{{user.secret}}</td>
        </tr>
    </table>

  </body>

</html>

Custom formatters


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

<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
    {{x | myFormat}}
</li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (i % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
        ];
});
</script>

<p>Make your own filters.</p>
<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>