快捷導(dǎo)航

AngularJS實(shí)現(xiàn)的自定義過(guò)濾器簡(jiǎn)單示例

更新時(shí)間：2019年02月02日 11:38:40 作者：前端林三哥

這篇文章主要介紹了AngularJS實(shí)現(xiàn)的自定義過(guò)濾器,結(jié)合實(shí)例形式分析了AngularJS自定義過(guò)濾器的簡(jiǎn)單定義與使用操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS實(shí)現(xiàn)的自定義過(guò)濾器。分享給大家供大家參考，具體如下：

1.自定義限制字?jǐn)?shù)的過(guò)濾器

啥也不說(shuō)了直接上代碼吧

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>'));
};
});

代碼直接拷走絕對(duì)沒(méi)問(wèn)題！！項(xiàng)目親測(cè)！

2.自定義其他過(guò)濾器

還是直接上代碼

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 '特價(jià)';break;
        case '0': return '未特價(jià)';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;
      }
    }

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個(gè)核心概念，但是有時(shí)候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說(shuō)明的相關(guān)資料,需要的朋友可以參考下
2016-08-08
angular中子控制器向父控制器傳值的實(shí)例
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
淺談angular4 ng-content 中隱藏的內(nèi)容
本篇文章主要介紹了淺談angular4 ng-content 中隱藏的內(nèi)容，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Angular?模塊封裝概念常見(jiàn)的錯(cuò)誤分析理解
這篇文章主要為大家介紹了Angular模塊封裝概念常見(jiàn)的錯(cuò)誤分析理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
angular directive的簡(jiǎn)單使用總結(jié)
directive（指令）是angular的一個(gè)非常強(qiáng)大又有用的功能，它相當(dāng)于實(shí)現(xiàn)了組件化的概念，我們可以通過(guò)它公共地自定義DOM元素或CLASS類或ATTR屬性，并且在這基礎(chǔ)上進(jìn)行操作scope、綁定事件等等
2017-05-05
Angular.js組件之input mask對(duì)input輸入進(jìn)行格式化詳解
這篇文章主要給大家介紹了關(guān)于Angular.js組件之input mask對(duì)input輸入進(jìn)行格式化的相關(guān)內(nèi)容，文中通過(guò)示例代碼詳細(xì)介紹了將銀行卡號(hào)和日期的方法，需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2017-07-07
AngularJS自定義表單驗(yàn)證功能實(shí)例詳解
這篇文章主要介紹了AngularJS自定義表單驗(yàn)證功能,結(jié)合完整實(shí)例形式詳細(xì)分析了AngularJS實(shí)現(xiàn)表單驗(yàn)證的相關(guān)指令、模型綁定、數(shù)據(jù)驗(yàn)證等操作技巧,需要的朋友可以參考下
2018-08-08
Angular自定義指令Tooltip的方法實(shí)例
現(xiàn)實(shí)世界千變?nèi)f化,區(qū)區(qū)幾種內(nèi)置指令不可能滿足所有的需求,下面這篇文章主要給大家介紹了關(guān)于Angular自定義指令Tooltip的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
Angular中SASS樣式的詳細(xì)使用教程
對(duì)于一個(gè)Sass用戶,只需要理解Sass擴(kuò)展部分如何工作的,就能完全理解SCSS,下面這篇文章主要給大家介紹了關(guān)于Angular中SASS樣式的詳細(xì)使用教程,需要的朋友可以參考下
2022-05-05
AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例
這篇文章給大家分享了AngularJS循環(huán)實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎(chǔ)功能，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，有需要的朋友可以看看。
2016-09-09