AngularJS——Filter (2)

最新推荐文章于 2019-12-16 13:28:04 发布

Paul_Huang_2011

最新推荐文章于 2019-12-16 13:28:04 发布

阅读量614

点赞数

分类专栏： Web前端文章标签： angularjs

本文链接：https://blog.csdn.net/hbr2014/article/details/45671153

版权

Web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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>

Paul_Huang_2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS——Filter (2)

Filter的用法选择包含Filter后字符串的内容，如 {{ ['苹果', '蛇果', '栗子', '葡萄', '香蕉', '柠檬'] | filter:'果' }}结果为：["苹果","蛇果"]limitTo 截取字符串，如 {{ "你是个好人" | limitTo:3 }}结果为：你是个还可以倒过来截取，如 {{ "你是个好人
复制链接

扫一扫