码迷,mamicode.com
首页 > 其他好文 > 详细

Angular过滤器基本用法

时间:2017-07-22 16:44:33      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:模板   blog   dex   htm   sage   ted   func   使用   actor   

过滤器主要用于数据的筛选,可以直接在模板使用

语法:

{{expression | filter}}

{{expression | filter | filter2}}

{{expression | filter : param....}}

例子:

demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="myController">
        <p>{{1234567 | number}}</p>
        <p>{{1234567 | number : 3}}</p>
        <p>{{1234567 | currency}}</p>
        <p>{{date | date : ‘yyyy-MM-dd HH:mm:ss‘}}</p>
        <p>{{[1,2,3,4,5,6] | limitTo:5}}</p>
        <p>{{‘AbCdefG‘ | lowercase}}</p>
        <p>{{‘AbCdefG‘ | uppercase}}</p>
        <p>{{city | filter : ‘上海‘}}</p>
        <p>{{city | filter : {address:‘h‘} }}</p>
        <p>{{city | orderBy : ‘address‘ }}</p>
        <p>{{city | orderBy : ‘-address‘ }}</p>
        <p>{{city | filter : checkName }}</p>
    </div>

</div>
<script type="text/javascript" src="../common/angular/angularjs.js"></script>
<script type="text/javascript" src="demo3.js"></script>
</body>
</html>

demo3.js

/**
 * Created by Administrator on 2017/7/22.
 */
angular.module(‘myApp‘, [])

    .factory(‘myData‘, function () {
        return {
            message: ‘wddsad‘,
            city: [
                {
                    name: ‘张三‘,
                    address: ‘上海‘
                },
                {
                    name: ‘李四‘,
                    address: ‘shenzhen‘
                }
            ]
        };
    })

    .controller(‘myController‘, function ($scope, myData,$filter) {
        $scope.date = new Date();
        $scope.city = myData.city;
        $scope.data = myData;

        //过滤器
        var a = $filter(‘number‘)(3000);
        // console.log(a);
        var b = $filter(‘json‘)($scope.data);
        // console.log(b);

        $scope.checkName = function(obj){
            if(obj.name.indexOf(‘张‘) === -1){
                return false;
            }
            return true;
        }
    })

效果图

 技术分享

 

 

 

Angular过滤器基本用法

标签:模板   blog   dex   htm   sage   ted   func   使用   actor   

原文地址:http://www.cnblogs.com/skyessay/p/7221490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!