AngularJS實現(xiàn)的自定義過濾器簡單示例
本文實例講述了AngularJS實現(xiàn)的自定義過濾器。分享給大家供大家參考,具體如下:
1.自定義限制字數(shù)的過濾器
啥也不說了直接上代碼吧
angular.module('demo').filter('cut', function($sce) { return function(value, wordwise, max, tail) { if (!value) return ''; max = parseInt(max, 10); if (!max) return value; if (value.length <= max) return value; if(value.length > max){ value = value.substr(0, max); } if (wordwise) { var lastspace = value.lastIndexOf(' '); if (lastspace != -1) { value = value.substr(0, lastspace); } } return $sce.trustAsHtml(value + (tail || ' … <span>顯示全文</span>')); }; });
代碼直接拷走絕對沒問題??!項目親測!
2.自定義其他過濾器
還是直接上代碼
angular.module('demo').filter('stateFormat', ['state', function (state) { return function(input, type){ if(type == 'stateColor'){ switch (input){ case '1': return 'green';break; case '0': return 'red';break; } } else if(type == 'stateText'){ switch (input){ case '1': return '特價';break; case '0': return '未特價';break; } } else if(type == 'marry'){ switch (input){ case '1': return '黃燜雞米飯';break; case '2': return '水煮肉片';break; case '3': return '酸菜魚';break; } } else(type == 'propertyColor'){ switch (input){ case '1': return 'blue';break; case '-1': return 'red';break; case '0': return ''; break; } }
更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設計有所幫助。
- 詳解AngularJS中自定義過濾器
- 詳解AngularJS中$filter過濾器使用(自定義過濾器)
- AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能示例
- AngularJS 自定義過濾器詳解及實例代碼
- AngularJS自定義過濾器用法經(jīng)典實例總結(jié)
- Angularjs 依賴壓縮及自定義過濾器寫法
- angularJs自定義過濾器實現(xiàn)手機號信息隱藏的方法
- 簡述angular自定義過濾器在頁面和控制器中的使用
- Angular.Js中過濾器filter與自定義過濾器filter實例詳解
- 詳解Angular的內(nèi)置過濾器和自定義過濾器【推薦】
- angularjs自定義過濾器demo示例
相關文章
全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個核心概念,但是有時候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細說明的相關資料,需要的朋友可以參考下2016-08-08淺談angular4 ng-content 中隱藏的內(nèi)容
本篇文章主要介紹了淺談angular4 ng-content 中隱藏的內(nèi)容,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08Angular.js組件之input mask對input輸入進行格式化詳解
這篇文章主要給大家介紹了關于Angular.js組件之input mask對input輸入進行格式化的相關內(nèi)容,文中通過示例代碼詳細介紹了將銀行卡號和日期的方法,需要的朋友們可以參考借鑒,下面來一起看看吧。2017-07-07AngularJS實現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實例
這篇文章給大家分享了AngularJS循環(huán)實現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎功能,對大家學習AngularJS具有一定的參考借鑒價值,有需要的朋友可以看看。2016-09-09