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;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。