AngularJs学习笔记-第二章-过滤器

2019年9月15日 95次阅读来源: MichaelDuan

1，currency(货币)

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>ng demo</title>
</head>
<body ng-controller="ctrl">
  <div ng-controller="ctrl">
  <input type="number" ng-model="amount" aria-label="amount"> <br>
  默认的货币符号($): <span >{{amount | currency}}</span><br>
  自定义的货币符号(USD$): <span >{{amount | currency:"RMB ￥"}}</span><br/>
  不带小数部分的货币符号-四舍五入 (0): <span id="currency-no-fractions">{{amount | currency:"USD$":0}}</span>
</div>
</body>
<script src="js2/angular.js"></script>
<script src="js/submit.js"></script>
</html>
js
var APP = angular.module('app', [])
    .controller('ctrl', ['$scope', function($scope) {
      $scope.amount = 1234.56;//设定默认的金钱总数值
    }]);

页面显示:
《AngularJs学习笔记-第二章-过滤器》

2,date(日期)
date 过滤器主要实现日期转换

<!DOCTYPE html>
<html>
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>ng demo</title>
</head>
<body ng-controller="ctrl">
<span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:<!--ng-non-bindable表示不绑定-->
    <span>{{1288323623006 | date:'medium'}}</span><br><!--angular绑定显示-->
<span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:
   <span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>:
   <span>{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}</span><br>
<span ng-non-bindable>{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}</span>:
   <span>{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}</span><br>
</body>
<script src="js2/angular.js"></script>
</html>

页面显示:(这个demo主要通过angular绑定和不绑定来区分date过滤器的作用)
《AngularJs学习笔记-第二章-过滤器》
3,filter-实现搜索功能

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>filter demo</title>
</head>
<body ng-controller="ctrl">
<!--定义数据源-->
<label>搜索:<input ng-model="searchText"></label>


<table id="searchTextResults">
  <tr><th>名字</th><th>电话</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>




<hr>


<label>任意搜索: <input ng-model="search.$"></label> <br>
<label>根据名字搜索:<input ng-model="search.name"></label><br>
<label>根据电话搜索:<input ng-model="search.phone"></label><br>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>



<table id="searchObjResults">
  <tr><th>名字</th><th>电话:</th></tr>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>


</body>
<script src="js2/angular.js"></script>
<script src="js/submit.js"></script>
</html>

js
var APP = angular.module('app', [])
    APP.controller('ctrl', ['$scope', function($scope) {
      $scope.friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'},
                         {name:'Adameeson',phone:'555-6983'},
                         {name:'Mikechel',phone:'555-9872'}]
    }]);

页面实现：
《AngularJs学习笔记-第二章-过滤器》

4，json-可以将js对象转换成json字符串

<!DOCTYPE html>
<html>
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>filter demo</title>
</head>
<body>
<pre id="default-spacing">{{ {'name':'value'} | json }}</pre>
<pre id="custom-spacing">{{ {'name':'value'} | json:9}}</pre>//这里的3代表转换后的json字符串前面的空格位置.
</body>
<script src="js2/angular.js"></script>
</html>

页面显示结果：
《AngularJs学习笔记-第二章-过滤器》
5,limitTo-可以创建一个新的数组或者是字符串只包含指定数量的元素，可以通过正负数确定获取原数组前或者是后几个元素的值。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>limitTo demo</title>
</head>
<body>
<div ng-controller="ctrl">
  <label>
    <!--下面的input框都定义成number类型是因为number类型被angular封装可以点击增加和减-->
     限制数字长度 {{numbers}} 到:
     <input type="number" step="1" ng-model="numLimit">
  </label>
  <p>数值输出: {{ numbers | limitTo:numLimit }}</p>
  <label>
     限制字母长度 {{letters}} 到:
     <input type="number" step="1" ng-model="letterLimit">
  </label>
  <p>字母输出: {{ letters | limitTo:letterLimit }}</p>
  <label>
     限制数字长度 {{longNumber}} 到:
     <input type="number" step="1" ng-model="longNumberLimit">
  </label>
  <p>长数字输出: {{ longNumber | limitTo:longNumberLimit }}</p>
</div>
</body>
<script src="js2/angular.js"></script>
<script src="js/submit.js"></script>
</html>
js
var APP = angular.module('app', [])
    APP.controller('ctrl', ['$scope', function($scope) {
      $scope.numbers = [1,2,3,4,5,6,7,8,9];
      $scope.letters = "abcdefghi";
      $scope.longNumber = 2345432342;
      $scope.numLimit = 3;
      $scope.letterLimit = -4;
      $scope.longNumberLimit = 5;
    }]);

页面实现:
《AngularJs学习笔记-第二章-过滤器》
6,lowercase/uppercase-将大写字符串转为小写/将小写转为大写

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>lowercase demo</title>
</head>
<body ng-controller="ctrl">
<div ng-model="strs">{{strs|lowercase}}</div>
<div ng-model="strs">{{str|uppercase}}</div>
</body>
<script src="js2/angular.js"></script>
<script src="js/submit.js"></script>
</html>
js
var APP = angular.module('app', [])
    APP.controller('ctrl', ['$scope', function($scope) {
      $scope.strs = "HUHAO";
      $scope.str = "huhao";
    }]);

页面分别呈现出小写的”huhao”和大写的”HUHAO”
7,number格式

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>number demo</title>
</head>
<body>
<div ng-controller="ctrl">
  <label>输入数字: <input ng-model='val'></label><br>
  默认格式: <span id='number-default'>{{val | number}}</span><br>
  无小数点: <span>{{val | number:0}}</span><br>
  负数格式: <span>{{-val | number:4}}</span><br>
  保留3位: <span>{{val | number:3}}</span><br>
</div>
</body>
<script src="js2/angular.js"></script>
<script src="js/submit.js"></script>
</html>
js
var APP =  angular.module('app', [])
    APP.controller('ctrl', ['$scope', function($scope) {
      $scope.val = 1234.56789;
    }]);

页面显示:
《AngularJs学习笔记-第二章-过滤器》
8.1,orderBy-用来对数组进行数组或字母排序

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>orderBy demo</title>
</head>
<body>
<div ng-controller="ctrl">
  <table border="1px solid red">
    <tr>
      <th>姓名</th>
      <th>电话号码</th>
      <th>年龄</th>
    </tr>
    <!--按照年龄从大到小排列-->
    <tr ng-repeat="friend in friends | orderBy:'-age'">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
    <!--按照年龄从小到大排列（默认)-->
    <tr ng-repeat="friend in friends | orderBy:'age'">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
    <!--按照名字字母顺序排列-->
    <tr ng-repeat="friend in friends | orderBy:'name'">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>
</body>
<script src="js2/angular.js"></script>
<script src="js/submit.js"></script>
</html>
js
var APP = angular.module('app', [])
    APP.controller('ctrl', ['$scope', function($scope) {
      $scope.friends =
          [{name:'John', phone:'555-1212', age:10},
           {name:'Mary', phone:'555-9876', age:19},
           {name:'Mike', phone:'555-4321', age:21},
           {name:'Adam', phone:'555-5678', age:35},
           {name:'Julie', phone:'555-8765', age:29}];
    }]);

页面显示:
《AngularJs学习笔记-第二章-过滤器》
8.2,实现反转排序

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>orderBy demo</title>
    </script>
<style type="text/css">
//这个样式是定义上下排序图标的
  .sortorder:after {
    content: '\25b2';
  }
  .sortorder.reverse:after {
    content: '\25bc';
  }
  </style>
</head>
<body>


<div>
  <div ng-controller="ctrl">
  <pre>根据什么来排序(Sorting predicate) = {{predicate}}; || 判断是否reverse = {{reverse}}</pre>
  <hr/>
  [ <a href="" ng-click="predicate=''">不按照任何条件排序</a> ]
  <table class="friend">
    <tr>
      <th>
        <a href="" ng-click="order('name')">姓名</a>
        <span class="sortorder" ng-show="predicate === 'name'"   ng-class="{reverse:reverse}"></span>
      </th>
      <th>
        <a href="" ng-click="order('phone')">电话号码</a>
        <span class="sortorder" ng-show="predicate === 'phone'"  ng-class="{reverse:reverse}"></span>
      </th>
      <th>
        <a href="" ng-click="order('age')">年龄</a>
        <span class="sortorder" ng-show="predicate === 'age'"    ng-class="{reverse:reverse}"></span>
      </th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>
</div>


</body>
<script src="js2/angular.js"></script>
<script src="js/submit.js"></script>
</html>

js
var APP = angular.module('app', [])
    APP.controller('ctrl', ['$scope', function($scope) {
      $scope.friends =
          [{name:'John', phone:'555-1212', age:10},
           {name:'Mary', phone:'555-9876', age:19},
           {name:'Mike', phone:'555-4321', age:21},
           {name:'Adam', phone:'555-5678', age:35},
           {name:'Julie', phone:'555-8765', age:29}];
      $scope.predicate = 'age';
      $scope.reverse = true;
      $scope.order = function(predicate) {
        $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
        $scope.predicate = predicate;
      };
    }]);

页面显示:
《AngularJs学习笔记-第二章-过滤器》
8.3 手动注入$filter来调用orderBy的过滤器

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta Content-Type="html/text;charset=UTF-8">
    <title>orderBy demo</title>
</head>
<body>
<div ng-controller="ctrl">
  <table>
    <tr>
      <th><a href="" ng-click="reverse=false;order('name', false)">姓名</a>
        ^<a href="" ng-click="order('-name',false)">^</a>^</th>
      <th><a href="" ng-click="reverse=!reverse;order('phone', reverse)">电话号码</a></th>
      <th><a href="" ng-click="reverse=!reverse;order('age',reverse)">年龄</a></th>
    </tr>
    <tr ng-repeat="friend in friends">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>
</body>
<script src="js2/angular.js"></script>
<script src="js/submit.js"></script>
</html>
js
var APP = angular.module('app', [])
    APP.controller('ctrl', ['$scope', '$filter', function($scope, $filter) {//也可以手动注入$filter来调用orderBy的过滤器
  var orderBy = $filter('orderBy');
  $scope.friends = [
    { name: 'John',    phone: '555-1212',    age: 10 },
    { name: 'Mary',    phone: '555-9876',    age: 19 },
    { name: 'Mike',    phone: '555-4321',    age: 21 },
    { name: 'Adam',    phone: '555-5678',    age: 35 },
    { name: 'Julie',   phone: '555-8765',    age: 29 }
  ];
  $scope.order = function(predicate, reverse) {
    $scope.friends = orderBy($scope.friends, predicate, reverse);
  };
  $scope.order('-age',false);
}]);

页面显示:
《AngularJs学习笔记-第二章-过滤器》

    原文作者：MichaelDuan
    原文地址: https://segmentfault.com/a/1190000003004758
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。