AngularJS Example

for http://stepansuvorov.com/blog/

by Stepan Suvorov

HTML

<div ng-controller="Ctrl">
    
<h3>currecy</h3>
 {{amount | currency}}<br>
 {{amount | currency:"USD$"}}<br>
    
<hr><h3>number</h3>

  {{amount | number}}<br>
  {{amount | number:0}}<br>
  {{-amount | number:4}}
    
<hr><h3>date</h3>
 {{timestamp | date:'medium'}}<br>
 {{timestamp | date:'yyyy-MM-dd HH:mm:ss Z'}}<br>
 {{timestamp | date:'MM/dd/yyyy @ h:mma'}}<br>
    

<hr><h3>json</h3>
  <pre>{{ object | json }}</pre>

    
<hr><h3>limitTo</h3>
  {{ numbers | limitTo:limit }}<br>
  {{ letters | limitTo:limit }}<br>
    
<hr><h3>lowercase/uppercase</h3>
{{ letters | lowercase}}<br>
{{ letters | uppercase}}<br>
    

    
<hr><h3>orderBy</h3>

  <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
  <hr/>
  <table class="friend">
    <tr>
      <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a></th>
      <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
      <td>{{friend.name}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
    
    
<hr><h3>filter</h3>     
<input ng-model="searchText.$">
Name only <input ng-model="searchText.name"><br>
<table>
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText:strict">
    <td>{{friend.name}}</td>
    <td>{{friend.age}}</td>
  </tr>
</table>
    
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

JavaScript

var app = angular.module('foo', [])


    function Ctrl($scope) {
        $scope.amount = 1234.56;
        $scope.timestamp = 1288323623006;
        $scope.object = {'name':'value'};
        
        $scope.numbers = [1,2,3,4,5,6,7,8,9];
        $scope.letters = "aBCdeFghi";
        $scope.limit = 3;
        
        $scope.friends =
        [{name:'John',  age:10},
         {name:'Mary',  age:19},
         {name:'Mike',  age:21},
         {name:'Adam', age:35},
         {name:'Julie', age:29}]
        $scope.predicate = '-age';

    }