AngularJS学习记录-过滤器的应用

最新推荐文章于 2022-01-14 17:01:08 发布

web_LamHo

最新推荐文章于 2022-01-14 17:01:08 发布

阅读量399

点赞数

分类专栏： Angular学习文章标签： AngularJS

本文链接：https://blog.csdn.net/web_LamHo/article/details/51356591

版权

Angular学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

AngularJS学习记录-过滤器的应用

表头排序

表头排序是指在使用列表方式显示数据时，用户如果点击列表中某列的表头元素，那么，列表中的全部数据将会自动按该列的属性值自动排序，默认为升序排列，再次点击该列表表头元素时，则又变为降序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/angular.min.js"></script>
    <style>
        body{
            font-size:12px;
        }
        ul{
            list-style-type: none;
            width: 408px;
            margin:0;
            padding:0;
        }
        ul li{
            float: left;
            padding:5px 0;
        }
        ul .bold{
            font-weight: bold;
            cursor:pointer;
        }
        ul li span{
            width: 52px;
            float:left;
            padding:0 10px;
        }
        ul .focus{
            background-color:#cccccc;
        }
    </style>
</head>
<body ng-app="app" ng-controller="myCtr">

    <div>
        <ul>
            <li ng-class="{{bold}}">
                <span>序号</span>
                <span ng-click="title='name';desc=!desc">姓名</span>
                <span ng-click="title='sex';desc=!desc">性别</span>
                <span ng-click="title='age';desc=!desc">年龄</span>
                <span ng-click="title='score';desc=!desc">分数</span>
            </li>
            <li ng-repeat="stu in data | orderBy : title : desc">
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{stu.age}}</span>
                <span>{{stu.score}}</span>
            </li>
        </ul>
    </div>

</body>
<script>
     var app = angular.module('app',[]);

     app.controller('myCtr',['$scope',function($scope){


         $scope.bold = 'bold';
         $scope.title = 'name';
         $scope.desc = 0;
         $scope.data = [
             {name : "小明",sex : "男",age : 24,score : 88},
             {name : "张东",sex : "男",age : 21,score : 90},
             {name : "小花",sex : "女",age : 25,score : 95},
             {name : "张蕾",sex : "女",age : 19,score : 86}
         ];

     }]);




</script>


</body>
</html>

源码分析：
首先，向页面控制器代码中添加’title’,’desc’两个属性，分别用与绑定排序时的属性名称和排序方向，并赋予初始值’name’和0,表示数据初始化时按’姓名’属性的升序排列

 $scope.title = 'name';
 $scope.desc = 0;

然后，页面的视图模板中，当通过ng-repeat指令复制并显示数据时，调用可’orderBy’过滤器，并带有两个参数，第一个冒号后面的参数指定排序的属性名，第二个冒号后的参数指定排序的方向，该参数默认或缺省时为升序*，1为降序，0为升序*。最后在各个表头元素的点击(ng-click)事件中，分别对’title’和’desc’属性值进行重置，由于这两个属性与’orderBy’已经绑定，所以改变这两个值的同时，会改变列表的排序，最终实现表头排序功能。

总结：

在例子中可以看到(ng-click)里可以直接改变数值，而不需要声明一个function去调用。
< span ng-click="title='score';desc=!desc">分数</ span >中可以发现，desc=!desc，其实等同于desc = desc == 1 ? 0 : 1。

字符查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <script src="../js/angular.min.js"></script>
    <style>
        body{
            font-size:12px;
        }
        ul{
            list-style-type: none;
            width: 408px;
            margin:0;
            padding:0;
        }
        ul li{
            float: left;
            padding:5px 0;
        }
        ul .bold{
            font-weight: bold;
            cursor:pointer;
        }
        ul li span{
            width: 52px;
            float:left;
            padding:0 10px;
        }
        ul .focus{
            background-color:#cccccc;
        }
    </style>
</head>
<body ng-app="app" ng-controller="myCtr">
    <div>
        <input type="text" id="tetkey" ng-model="key" placeholder="请输入姓名关键字">
    </div>
    <div>
        <ul>
            <li ng-class="{{bold}}">
                <span>序号</span>
                <span ng-click="title='name';desc=!desc">姓名</span>
                <span ng-click="title='sex';desc=!desc">性别</span>
                <span ng-click="title='age';desc=!desc">年龄</span>
                <span ng-click="title='score';desc=!desc">分数</span>
            </li>
            <li ng-repeat="stu in data | filter : {name:key}">
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{stu.age}}</span>
                <span>{{stu.score}}</span>
            </li>
        </ul>
    </div>

</body>
<script>
     var app = angular.module('app',[]);

     app.controller('myCtr',['$scope',function($scope){


         $scope.bold = 'bold';
         $scope.key = '';
         $scope.data = [
             {name : "小明",sex : "男",age : 24,score : 88},
             {name : "张东",sex : "男",age : 21,score : 90},
             {name : "小花",sex : "女",age : 25,score : 95},
             {name : "张蕾",sex : "女",age : 19,score : 86}
         ];

     }]);




</script>


</body>
</html>

源码分析：
首先，在页面的控制器代码中添加一个名为’key’的属性，用于保存用户在文本框的输入的字符内容，该属性的初始值为空。
然后，在通过’ng-repeat’指令显示数据时，调用Angualr中的’filter’过滤器，并添加一个对象性字符参数，制定在数据对象的’name’属性中查找’key’值，即在”姓名”属性中查找文本框输入的内容，如果找到就显示，如果没有找到则不显示。
最后，在页面视图模板中，通过”ng-model”指令双向数据绑定控制器中的”key”的值将自动同步更新。