AngularJs学习笔记（三）----------关于过滤器(orderBy，filter)、$http的综合应用

时间 2019-12-11

标签 angularjs 学习笔记关于过滤器 orderby filter http 综合应用栏目 AngularJS 繁體版

原文原文链接

<!DOCTYPE html5>
<html>
    <head>
        <title>AngularJs的练习</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="css/5.css"/>
    </head>
    <body>
        <h1>关于AngularJs的小demo练习</h1>
        <p>注：要看此demo的效果，必须开服务器，不能本地访问（由于请求了json数据）</p>
        <h3>题目描述：</h3>
        <p>在Model中建立一个员工数组，每一个员工都有姓名、生日、工资、我的简介几个属性，把全部数据显示在一个view中的表格里</p>
        <div ng-app="myModule1" ng-controller="myCtr1">
            <button ng-click="addData()">添加数据</button>
            <label>请输入关键字，进行筛选</label><input ng-model="keyWords" type="text"/>
            <p></p>
            <table>
                <thead>
                    <th><a href="javascript:void(0)" ng-click="orderName()">姓名</a></th>
                    <th><a href="javascript:void(0)" ng-click="orderBirthday()">生日</a></th>
                    <th><a href="javascript:void(0)" ng-click="orderSalary()">工资</a></th>
                    <th>我的简介</th>
                </thead>
                <tbody>
                    <!-- 此处用到了filter和orderBy过滤器（两个过滤器连用） -->
                    <tr ng-repeat="employee in ( employees | filter : keyWords | orderBy : orderPropertyName : reverse)">
                        <td>{{ employee.ename }}</td>
                        <td>{{ employee.birthday | date : 'yyyy-MM-dd'}}</td>
                        <td>{{ employee.salary | currency : '￥'}}</td>
                        <td>{{ employee.intro }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script src="js/angular.js"></script>
        <script src="js/5.js"></script>
    </body>
</html>

对应的js文件：javascript

angular.module('myModule1',[])
        .controller('myCtr1',function($scope,$http){
                $scope.reverse=false;
                $scope.addData=function(){
                    /*$scope.employees=[
                        {ename:'Tom',birthday:1423423,salary:123332,intro:'她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
                        {ename:'Lily',birthday:24423423,salary:322,intro:'她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
                        {ename:'Bom',birthday:42344423,salary:722,intro:'她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
                        {ename:'Hung',birthday:44323423,salary:12,intro:'她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
                        {ename:'Dgyj',birthday:55423423,salary:22,intro:'她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'},
                        {ename:'Jenny',birthday:66223423,salary:522,intro:'她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。'}
                    ];*/
                    //上面也是对着呢，由于后面使用了json文件模拟数据，故将其注释
                    //使用AS中的$http发起AJAX请求，获取服务端的数据--要看此demo的效果，必须开服务器，不能本地访问
                    $http.get('json/5.json')
                         .success(function(receiveData){
                             $scope.employees=receiveData;
                         })
                         .error(function(){
                             console.log('我请求数据失败了');
                         });
                };
                // 按照姓名进行排序
                $scope.orderName=function(){
                    $scope.orderPropertyName='ename';
                    $scope.reverse=!$scope.reverse;  //达到正序、逆序排序相交替的效果
                };
                //按照生日进行排序
                $scope.orderBirthday=function(){
                    $scope.orderPropertyName='birthday';
                    $scope.reverse=!$scope.reverse;
                };
                //按照工资进行排序
                $scope.orderSalary=function(){
                    $scope.orderPropertyName='salary';
                    $scope.reverse=!$scope.reverse;
                };
        });

对应的json文件：css

[
     {"ename":"Tom","birthday":1423423,"salary":123332,"intro":"她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
     {"ename":"Lily","birthday":24423423,"salary":322,"intro":"她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
     {"ename":"Bom","birthday":42344423,"salary":722,"intro":"她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
     {"ename":"Hung","birthday":44323423,"salary":12,"intro":"她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
     {"ename":"Dgyj","birthday":55423423,"salary":22,"intro":"她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"},
     {"ename":"Jenny","birthday":66223423,"salary":522,"intro":"她是这样的，为人很好，咱们都喜欢！就喜欢她遮阳挡额解决就是您尽快呢就是说你。"}
]
// 注：json数据中名与字符串都必须使用双引号，不然请求会失败

对应的css文件：html

table{
    width:950px;
    border-collapse:collapse;
}
a{
    text-decoration:none;
}
th,td{
    border:green solid 1px;
    padding:5px;
}