AngularJS中過(guò)濾器的使用與自定義實(shí)例代碼
前言
相信大家都知道過(guò)濾器的使用:一種是在html中的使用,一種是在js代碼中的使用,下面我們來(lái)通過(guò)實(shí)例深入了解。
實(shí)例代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>過(guò)濾器</title> <script src="day2/src/angular.js"></script> <style type="text/css"> </style> </head> <body> <div ng-app="fristApp"> <div ng-controller="fristController"> <!--多個(gè)過(guò)濾器之間用 | 鏈接--> <!--參數(shù)的實(shí)質(zhì)就是把參數(shù)添加在數(shù)字前面(在貨幣符號(hào)處使用)--> {{money | currency}}<br /> {{money | currency:'¥'}}<br /> {{str | uppercase}}<br /> {{json | json}}<br /> <!-- 會(huì)進(jìn)行四舍五入--> {{num | number:3}}<br /> <!--時(shí)間 只有MM是大寫--> {{currenttime | date:'yyyy-MM-dd-hh'}} <!--字符串的切割--> {{strr | limitTo:3}} {{strr | limitTo:-3}} <!--按照person的age進(jìn)行排序--> <ul> <li ng-repeat="person in arr | orderBy:'age':false"> {{person.name}} </li> </ul> <!--true 位于第二個(gè)位置,其中num是不能加“”的,上面的加“”是因?yàn)閚ame是他的一個(gè)屬性--> <ul> <li ng-repeat="n in [2,43,432,453,65] | orderBy:num:true"> {{n}} </li> </ul> <!--根據(jù)person的屬性進(jìn)行過(guò)濾--> <input type="text" ng-model="name" /> <ul> <li ng-repeat="person in arr | filter:{'name':name}"> {{person.name}} </li> </ul> </div> </div> </body> <script type="text/javascript"> var myApp = angular.module('fristApp',[]); myApp.controller('fristController',function($scope,$filter){ $scope.money = 100; $scope.str = "fsHIOiiiiIU" ; $scope.json = {name:"zhangsan",age:40}; $scope.num = 12432432432; var time = new Date(); $scope.currenttime = time.getTime(); $scope.strr = "fujichao"; $scope.arr = [ {name:'zhangsan',age:33}, {name:'zhangsan2',age:30}, {name:'zhangsan3',age:44}, {name:'zhangsan4',age:3} ]; // 如果數(shù)組的元素相等的話,這兩個(gè)元素的內(nèi)存地址是相同的。 var arrnum = [12,12,33,44]; if(arrnum[0]===arrnum[1]){ console.log("fji") }; /* 在JS中使用過(guò)濾器*/ // $filter(過(guò)濾器的名字)(對(duì)象,條件) var val = $filter('currency')($scope.money,'¥'); console.log(val); var string1 = "fssdHIUHIjiojjOIJIOJ" var valStr = $filter('uppercase')(string1); console.log(valStr) }) </script> </html>
運(yùn)行效果圖如下
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)或者工作帶來(lái)一定的幫助,如果有疑問大家可以留言交流。
- 詳解AngularJS中自定義過(guò)濾器
- 使用AngularJS創(chuàng)建自定義的過(guò)濾器的方法
- 詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
- AngularJS 自定義過(guò)濾器詳解及實(shí)例代碼
- AngularJS使用Filter自定義過(guò)濾器控制ng-repeat去除重復(fù)功能示例
- Angularjs 依賴壓縮及自定義過(guò)濾器寫法
- AngularJS自定義過(guò)濾器用法經(jīng)典實(shí)例總結(jié)
- angularJs自定義過(guò)濾器實(shí)現(xiàn)手機(jī)號(hào)信息隱藏的方法
- AngularJS實(shí)現(xiàn)的自定義過(guò)濾器簡(jiǎn)單示例
相關(guān)文章
angularjs實(shí)現(xiàn)下拉列表的選中事件示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)下拉列表的選中事件示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03解決angular雙向綁定無(wú)效果,ng-model不能正常顯示的問題
今天小編就為大家分享一篇解決angular雙向綁定無(wú)效果,ng-model不能正常顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10angularjs獲取到My97DatePicker選中的值方法
今天小編就為大家分享一篇angularjs獲取到My97DatePicker選中的值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫法小結(jié)
這篇文章主要介紹了使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫法小結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04angular6 利用 ngContentOutlet 實(shí)現(xiàn)組件位置交換(重排)
這篇文章主要介紹了angular6 利用 ngContentOutlet 實(shí)現(xiàn)組件位置交換(重排),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11簡(jiǎn)單說(shuō)說(shuō)angular.json文件的使用
這篇文章主要介紹了簡(jiǎn)單說(shuō)說(shuō)angular.json文件的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10