AngularJs學習筆記-第二章-過濾器

時間  2019-12-04
標籤 angularjs 學習 筆記 第二 過濾器 欄目 AngularJS 简体版
原文   原文鏈接

1，currency(貨幣)css

<!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;//設定默認的金錢總數值
    }]);

頁面顯示:
currency filterhtml

2,date(日期)
date 過濾器主要實現日期轉換json

<!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過濾器的做用)
date filter
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'}]
    }]);

頁面實現：
filter
filter2
4，json-能夠將js對象轉換成json字符串app

<!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>

頁面顯示結果：
json
5,limitTo-能夠建立一個新的數組或者是字符串只包含指定數量的元素，能夠經過正負數肯定獲取原數組前或者是後幾個元素的值。spa

<!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;
    }]);

頁面實現:
limitTo
6,lowercase/uppercase-將大寫字符串轉爲小寫/將小寫轉爲大寫code

<!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格式htm

<!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;
    }]);

頁面顯示:
number
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}];
    }]);

頁面顯示:
orderBy
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;
      };
    }]);

頁面顯示:
orderBy
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);
}]);

頁面顯示:
手動注入filter

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程