快捷導(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 '酸菜魚(yú)';break;
      }
    } else(type == 'propertyColor'){
      switch (input){
        case '1': return 'blue';break;
        case '-1': return 'red';break;
        case '0': return ''; break;
      }
    }

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

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

您可能感興趣的文章:

相關(guān)文章

AngularJS輕松實(shí)現(xiàn)雙擊排序的功能
網(wǎng)上已經(jīng)有AngularJS比較多的相關(guān)教程了，那么這篇文章我們一起來(lái)看一個(gè)AngularJS雙擊排序的例子，對(duì)大家日常開(kāi)發(fā)很有幫助的，有需要的可以參考借鑒。
2016-08-08
Angular處理未可知異常錯(cuò)誤的方法詳解
這篇文章主要給大家介紹了關(guān)于A(yíng)ngular如何處理未可知異常錯(cuò)誤的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
淺析Angular19 自定義表單控件
這篇文章主要介紹了Angular19 自定義表單控件的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-01-01
Angular通過(guò)angular-cli來(lái)搭建web前端項(xiàng)目的方法
這篇文章主要介紹了Angular通過(guò)angular-cli來(lái)搭建web前端項(xiàng)目的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
Angularjs中controller的三種寫(xiě)法分享
這篇文章給大家介紹了angularjs中controller的三種寫(xiě)法，每種寫(xiě)法都給出了示例代碼，對(duì)大家理解和學(xué)習(xí)很有幫助，有需要的朋友們可以參考借鑒。
2016-09-09
angular實(shí)現(xiàn)圖片懶加載實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)圖片懶加載實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
AngularJs導(dǎo)出數(shù)據(jù)到Excel的示例代碼
本篇文章主要介紹了AngularJs導(dǎo)出Excel的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Angularjs使用過(guò)濾器完成排序功能
這篇文章主要為大家詳細(xì)介紹了Angularjs使用過(guò)濾器完成排序功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
三種AngularJS中獲取數(shù)據(jù)源的方式
這篇文章主要介紹了三種AngularJS中獲取數(shù)據(jù)源的方式,需要的朋友可以參考下
2016-02-02
AngularJS語(yǔ)法詳解
本文通過(guò)示例向大家介紹了AngularJS語(yǔ)法的使用，小伙伴們認(rèn)真研讀下吧，非常的實(shí)用哦。
2015-01-01