AngularJS入门-（8）过滤器

最新推荐文章于 2020-12-29 05:39:38 发布

炽天使_1985

最新推荐文章于 2020-12-29 05:39:38 发布

阅读量240

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/wzjisking/article/details/76546150

版权

AngularJS 专栏收录该内容

11 篇文章

订阅专栏

什么是过滤器？

过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。常用的过滤器如下
1. 大写
2. 小写
3. 货币
4. 过滤器
5. 排序

大写过滤器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myController">

    <p>姓名为 {{ name | uppercase }}</p>

</div>

<script>
    angular.module('myApp', []).controller('myController', function($scope) {
        $scope.name = "seraph";
    });

</script>

</body>
</html>

小写过滤器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myController">
<p>姓名为 {{ name | lowercase }}</p>
</div>
<script>
    angular.module('myApp', []).controller('myController', function($scope) {
        $scope.name = "SERAPH";
    });

</script>
</body>
</html>

货币

</head>
<body>

<div ng-app="myApp" ng-controller="costCtrl">

    数量: <input type="number" ng-model="number">
    价格: <input type="number" ng-model="price">

    <p>总价 = {{ (number * price) | currency }}</p>

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('costCtrl', function($scope) {
        $scope.number = 1;
        $scope.price = 9.99;
    });
</script>

</body>
</html>

过滤器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
    <p>输入过滤:</p>
    <p><input type="text" ng-model="test"></p>

    <ul>
        <li ng-repeat="x in names | filter:test ">
            {{ x.name  + x.age }}
        </li>
    </ul>
</div>
<script >
    angular.module('myApp', []).controller('myController', function($scope) {
        $scope.names = [
            {name:'小刚',age:'18'},
            {name:'小明',age:'15'},
            {name:'小红',age:'17'}
        ];
    });
</script>
</body>
</html>

排序

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myController">

    <p>循环对象:</p>
    <ul>
        <li ng-repeat="x in names | orderBy:'country'">
            {{ x.name + ', ' + x.country }}
        </li>
    </ul>

</div>

<script >
    angular.module('myApp', []).controller('myController', function($scope) {
        $scope.names = [
            {name:'小刚',country:'Norway'},
            {name:'小明',country:'Sweden'},
            {name:'小红',country:'Denmark'}
        ];
    });

</script>

</body>
</html>