AngularJS——Filter (2)

来源：互联网发布：淘宝商品评价没有了编辑：程序博客网时间：2024/05/16 18:20

Filter的用法

选择包含Filter后字符串的内容，如

{{ ['苹果', '蛇果', '栗子', '葡萄', '香蕉', '柠檬'] | filter:'果' }}

结果为：["苹果","蛇果"]

limitTo

截取字符串，如

{{ "你是个好人" | limitTo:3 }}

结果为：你是个

还可以倒过来截取，如

{{ "你是个好人" | limitTo:-3 }}

结果为：个好人

对于数组也可以：

{{ ['苹果', '蛇果', '栗子', '葡萄', '香蕉', '柠檬'] | limitTo:3 }}

结果为：["苹果","蛇果","栗子"]

number

加分隔符或截取小数点后的几位，如：

orderBy

倒序和顺序用最后的true 来确定，如：

{{ [{
'name': 'Ari',
'status': 'awake'
}, {
'name': 'Q',
'status': 'sleeping'
}, {
'name': 'Nate',
'status': 'awake'
}] | orderBy: 'name' }}

倒序的话，设true

{{ [{
'name': 'Ari',
'status': 'awake'
}, {
'name': 'Q',
'status': 'sleeping'
}, {
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name':true }}

自定义Filter

我们现在自定义一个句首字母大写的Filter，代码如下：

JS文件：

angular.module('myApp.filters', [])    .filter('capitalize', function() {        return function(input) {// input will be the string we pass in            if (input)                return input[0].toUpperCase() +                    input.slice(1);        }    });var myApp=angular.module("myApp",['myApp.filters'])myApp.controller('FilterController', ['$scope', '$filter',    function($scope, $filter) {        $scope.lowercasename = $filter('lowercase')("HBR");    }]);

HTML文件

<html><head lang="en">    <meta charset="UTF-8">    <script            src="bower_components/angular/angular.js">    </script>    <script            src="js/filterlearning.js">    </script></head><body ng-app="myApp"><div ng-controller="FilterController">   <p> {{ ['苹果', '蛇果', '栗子', '葡萄', '香蕉', '柠檬'] | filter:'果' }}</p>    <p> {{ "你是个好人" | limitTo:-3 }}</p>    <p> {{ ['苹果', '蛇果', '栗子', '葡萄', '香蕉', '柠檬'] | limitTo:3 }}</p>    <!-- Ginger loves dog treats -->   <p>{{ 'ginger loves dog treats' |lowercase| capitalize }}</p></div></body></html>

0 0