angularjs 自定義過濾器 v1.x

阿新 • • 發佈：2019-01-30

AngularJS 過濾器

過濾器可以使用一個管道字元（|）新增到表示式和指令中。

過濾器	描述
currency	格式化數字為貨幣格式。
filter	從陣列項中選擇一個子集。
lowercase	格式化字串為小寫。
orderBy	根據某個表示式排列陣列。
uppercase	格式化字串為大寫。

AngularJS 過濾器可用於轉換資料，以上過濾器是angularjs自帶的，通常不能滿足我們的特殊需要，因此，通常還需要懂得自定義過濾器。

<!DOCTYPE html>
<html 
 lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularjs 自定義過濾器</title>
</head>
<body ng-app="app">
<div ng-controller="ctr">
    <h1>水果價格表</h1>
    <div>
        價格範圍：
        <input type="number" ng-model="min">--
        <input 
 type="number" ng-model="max">
    </div>
    <ul>
        <!--自定義過濾器myfilter在html中呼叫時不需要傳第一個引數，後面2個引數用“：”拼接，可以是字串、數值或者變數-->
        <li ng-repeat="item in fruits | myfilter:min:max">
            名稱：<span ng-bind="item.name"></span>&nbsp;&nbsp;&nbsp;&nbsp;
            價格：<span 
 ng-bind="item.price"></span>
        </li>
    </ul>

</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
    angular.module('app', [])
            .filter('myfilter', function () {
                return function (fruits, min, max) {
                    //fruits 為第一個引數，即待過濾的陣列
                    //min,max為其他引數可有可無
                    var arr = [];
                    min = min > 0 ? min : 0;
                    max = max ? max : 99999999;
                    angular.forEach(fruits, function (item) {
                        if (item.price > min && item.price <= max) {
                            arr.push(item);
                        }
                    });
                    return arr;
                }
            })
            .controller('ctr', ['$scope', '$filter', function ($scope, $filter) {
                $scope.fruits = [
                    {name: 'apple', price: 5.2},
                    {name: 'banana', price: 3.5},
                    {name: 'mango', price: 12},
                    {name: 'watermelon', price: 2.5},
                    {name: 'peach', price: 4},
                    {name: 'grape', price: 15},
                    {name: 'litchi', price: 20},
                    {name: 'orange', price: 6}
                ];

                //自定義過濾器myfilter在js中使用時，案例如下:
                //第一個引數是待過濾資料，第2，3個數據是根據定義要求傳入的資料，用逗號分割
                $scope.res = $filter('myfilter')($scope.fruits, 10, 20);
                console.log($scope.res);
            }])
</script>
</body>
</html>

angularjs 自定義過濾器 v1.x

AngularJS 過濾器過濾器可以使用一個管道字元（|）新增到表示式和指令中。過濾器描述 currency 格式化數字為貨幣格式。 filter 從陣列項中選擇一個子集。 lowercase 格式化

angularJS自定義過濾器

tex ctrl func turn filter pri spa clas com var app = angular.module(‘myApp‘, []); app.controller(‘myCtrl‘, function($scope) { }); app.fil

angularJS自定義過濾器篩選列表/下拉框

angularJS過濾器實現篩選列表/下拉框專案中有時會有這樣的需求：用input輸入框實現對select下拉框或者一個列表的篩選功能。（這是作者寫的一個小demo，請忽略樣式）篩選的結果：那麼怎麼用angularJS簡單、便捷地實現這一功能

angularjs 自定義過濾器控制文字的長度，多餘字元用省略號代替

今天在工作中，碰到了一個問題，在表格當中，文字的長度太長，導致整個表格拉長了很多，當給表格中td設定固定寬度的時候就會換行，顯得頁面比較醜，所以想到了把超出表格寬度部分的文字隱藏掉。於是就想到了用自定義過濾器的辦法，濾掉多餘的文字，搜尋了一下，有大神的例子做參考

angularjs-自定義過濾器示例

過濾器結構 {{帶過濾資料 | 過濾器名：引數1：引數2：引數3.....}} app.filter('過濾器名', function () { return function (

angularJs-----$filter過濾器使用自定義過濾器

1.內建過濾器 * $filter 過濾器，是angularJs中用來處理資料以更好的方式展示給我使用者。比如格式化日期，轉換大小寫等等。 * 過濾器即有內建過濾器也支援自定義過濾器。內建過濾器很多，可以百度。關鍵是如何使用： * 1.在HTML中直接使用內建過

如何在angularjs的自定義指令內部定義自定義過濾器？

今天下班碰到之前的小學妹，看她今天很是煩躁，我們就溝通了一下，原來是上學的時候沒有學好AngularJS，有很多不懂的問題，她問了我一個問題，就是怎麼使用自定義過濾器？一聽到這個問題，我就有得說了，

AngularJs Filter自定義過濾器控制ng-repeat去除重複

程式碼： <div ng-app="myApp" ng-controller="myCtrl"> <p ng-repeat="x in items | unique:'id'"> {{x.id}}---{{x.name}}

《AngularJs》$filter 自定義過濾器

使用內建過濾器直接查手冊就行了下面為自定義過濾器： <!DOCTYPE html> <html lang="en"> <head> <meta c

AngularJS過濾器以及自定義過濾器

過濾器是用來更改修改資料，並且可以在表示式或使用管道符指令將其歸入。以下是常用的過濾器的列表。一.AngularJS的filter過濾器向表示式新增過濾器：可以通過一個管道字元(“|”)和一個過濾器新增到表示式中,可以使用多個過濾器，用管道字元(“|”)隔開就好。 1.

vue14 自定義過濾器

col ron 1.0 set status max div model welcome <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

深究AngularJS——自定義服務詳解(factory、service、provider)

string targe 返回 config 屬性 doctype 三種方式啟用 print 前言 3種創建自定義服務的方式。 Factory Service Provider 大家應該知道，AngularJS是後臺人員在工作之余發明的，他主要應用了後臺早就存

AngularJs自定義指令詳解（5） - link

演示 hang cursor off drag font 雙向事件 date 在指令中操作DOM，我們需要link參數，這參數要求聲明一個函數，稱之為鏈接函數。寫法： link: function(scope, element, attrs) {　　// 在這裏操作DO

django模板中的自定義過濾器

tag span .lib 名稱 models mod ppa har import （1）在APP下創建templatetags文件夾，與Models.py、views.py等同級，templatetags文件夾下添加__init__.py文件，可為空，再添加一個模塊文件

Angular 自定義過濾器

scope urn rip htm ng- 顯示 () ctrl ont <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8">

自定義過濾器-有參數

mobile class logs sca bar span src use idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Django中自定義過濾器的使用

sof html views charset 展示 set etag 很多 back 我在這裏做的是：從數據庫查出id遞增的一些信息，展示在前臺。編寫一個過濾器判斷查出數據的id是偶數的返回True 奇數返回False 1 創建項目，創建應用，註冊應用，配置

vue自定義過濾器格式化時間為年、月、日、小時、分鐘、剛剛

color 進行 ges time log 格式化時間 lte seconds gets 首先需要在需要過濾的時間裏面添加一個過濾器我這裏需要過濾的是item.time 然後需要在item.time後面添加自定義過濾的名稱 date 接下來就是需要定

django-自定義過濾器

配置文件 safe 創建 decorator 方法 nbsp div 固定 filter 整個流程是需要被的 1,首先要在setting裏面找到INSTALLED_APPS這個配置文件 @register.filter 這個裝飾器的名字不能變,每個都有不同意義----裝飾變

vue2 + typescript2 自定義過濾器

過濾器 java sage value round -c val extend scrip 1.定義一個過濾器 // color-directive.ts import { DirectiveOptions } from ‘vue‘ const directive:

angularjs 自定義過濾器 v1.x

AngularJS 過濾器

相關推薦