AngularJs练习Demo7

最新推荐文章于 2016-06-21 23:14:00 发布

weixin_30929295

最新推荐文章于 2016-06-21 23:14:00 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sumg/p/5605348.html

本文通过一个具体的AngularJS应用实例介绍了内置过滤器的使用方法，包括文本转换、数字格式化、日期显示等，并展示了如何自定义过滤器及在控制器中使用过滤器。此外，还演示了如何使用过滤器对数组进行排序和筛选。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>过滤器和自定义过滤器</title>
    <script type="text/javascript" src="~/Scripts/angular.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
            <p>在输入框中尝试输入：</p>
            <p>姓名：<input type="text" ng-model="firstName" /></p>
            {{firstName | uppercase}}<br />
            {{lastName}}<br />
            {{price | currency}}<br />
            {{json | json}}  @*JSON格式化的过滤器*@<br />
            {{1304375948024 | date:"yyyy-MM-dd hh:mm:ss"}} @*date 日期过滤器可以给日期格式化**@<br />
            {{123456|number:1}} @*数字过滤器 保留1位小数*@ <br />
            {{250 | currency:'RMB ￥'}}<br />
            {{"i love tank"| limitTo:6}} <br /> @* 截取六个字符串 *@
            {{"i love tank"| limitTo:-6}} <br /> @* 从后向前截取字符串 *@
            <p>
                控制器使用过滤器
                uFirstName:   {{uFirstName}}<br />
                cPrice:     {{cPrice}}<br />
            </p>
        </div>
        <div ng-controller="secondController">

            <p>
                循环对象：
                <ul>
                    <li ng-repeat="x in names | orderBy:'country'：true">
                        @*true表示降序排序*@
                    {{x.name+","+x.country}}
                </li>
            </ul>
        </p>
        <p>
            输入过滤：
        </p>
        <p><input type="text" ng-model="name" /></p>
        <p>
            <ul>
                <li ng-repeat="x in names | filter:name | orderBy:'country'">
                    {{x.name+","+x.country}}
                </li>
            </ul>
        </p>

        <ul>
            <li ng-repeat="p in person">
                姓名：{{p.name}}
                年龄：{{p.age}}
            </li>
        </ul>
    </div>

    {{
        [{"age":20,"id":10,"name":"iphone"},
        {"age":12,"id":11,"name":"sunm xing"},
        {"age":44,"id":12,"name":"test abc"}
        ]| filter:{"name":"iphone"}
    }}


</div>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("firstController", function ($scope, $filter) {
        $scope.firstName = "zhangsan";
        $scope.lastName = "李四";
        $scope.price = "121212";
        $scope.str = "HelloWorld";
        $scope.json = { foo: "bar", baz: 23 };
        $scope.uFirstName = $filter("uppercase")($scope.firstName);
       // $scope.cPrice = $filter("currency")($scope.price);
        $scope.cPrice = $filter("currency")($scope.price,'RMB'); //格式化参数可以写在后面
    });
    app.controller("secondController", function ($scope) {
        $scope.person = [
            { name: "张三", age: "25" },
            { name: "李四", age: "30" },
             { name: "王五", age: "36" }
        ];
        $scope.names = [
            { name: "jani", country: "Norway" },
            { name: "Hege", country: "Sweden" },
            { name: "Kai", country: "Denmark" }
        ];
    });
</script>
</body>
</html>