欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實現(xiàn)的自定義過濾器簡單示例

 更新時間：2019年02月02日 11:38:40   作者：前端林三哥  
這篇文章主要介紹了AngularJS實現(xiàn)的自定義過濾器,結(jié)合實例形式分析了AngularJS自定義過濾器的簡單定義與使用操作技巧,需要的朋友可以參考下

本文實例講述了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;
      }
    }

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

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

相關(guān)文章

  • 全面解析Angular中$Apply()及$Digest()的區(qū)別

    全面解析Angular中$Apply()及$Digest()的區(qū)別

    $apply()和$digest()在AngularJS中是兩個核心概念，但是有時候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細說明的相關(guān)資料,需要的朋友可以參考下
    2016-08-08
  • angular中子控制器向父控制器傳值的實例

    angular中子控制器向父控制器傳值的實例

    今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • 淺談angular4 ng-content 中隱藏的內(nèi)容

    淺談angular4 ng-content 中隱藏的內(nèi)容

    本篇文章主要介紹了淺談angular4 ng-content 中隱藏的內(nèi)容，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Angular?模塊封裝概念常見的錯誤分析理解

    Angular?模塊封裝概念常見的錯誤分析理解

    這篇文章主要為大家介紹了Angular模塊封裝概念常見的錯誤分析理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-07-07
  • angular directive的簡單使用總結(jié)

    angular directive的簡單使用總結(jié)

    directive（指令）是angular的一個非常強大又有用的功能，它相當于實現(xiàn)了組件化的概念，我們可以通過它公共地自定義DOM元素或CLASS類或ATTR屬性，并且在這基礎(chǔ)上進行操作scope、綁定事件等等
    2017-05-05
  • Angular.js組件之input mask對input輸入進行格式化詳解

    Angular.js組件之input mask對input輸入進行格式化詳解

    這篇文章主要給大家介紹了關(guān)于Angular.js組件之input mask對input輸入進行格式化的相關(guān)內(nèi)容，文中通過示例代碼詳細介紹了將銀行卡號和日期的方法，需要的朋友們可以參考借鑒，下面來一起看看吧。
    2017-07-07
  • AngularJS自定義表單驗證功能實例詳解

    AngularJS自定義表單驗證功能實例詳解

    這篇文章主要介紹了AngularJS自定義表單驗證功能,結(jié)合完整實例形式詳細分析了AngularJS實現(xiàn)表單驗證的相關(guān)指令、模型綁定、數(shù)據(jù)驗證等操作技巧,需要的朋友可以參考下
    2018-08-08
  • Angular自定義指令Tooltip的方法實例

    Angular自定義指令Tooltip的方法實例

    現(xiàn)實世界千變?nèi)f化,區(qū)區(qū)幾種內(nèi)置指令不可能滿足所有的需求,下面這篇文章主要給大家介紹了關(guān)于Angular自定義指令Tooltip的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-05-05
  • Angular中SASS樣式的詳細使用教程

    Angular中SASS樣式的詳細使用教程

    對于一個Sass用戶,只需要理解Sass擴展部分如何工作的,就能完全理解SCSS,下面這篇文章主要給大家介紹了關(guān)于Angular中SASS樣式的詳細使用教程,需要的朋友可以參考下
    2022-05-05
  • AngularJS實現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實例

    AngularJS實現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實例

    這篇文章給大家分享了AngularJS循環(huán)實現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎(chǔ)功能，對大家學習AngularJS具有一定的參考借鑒價值，有需要的朋友可以看看。
    2016-09-09

最新評論