菜雞學AngularJS 04 循環(huán)綁定、排序、搜索

1：循環(huán)綁定數(shù)組

PS：ng-repeat = "i in 數(shù)組名" ，i為數(shù)組每次循環(huán)出來的結果
<!doctype html>
<html ng-app = "myapp" ng-controller = "TestController">
<head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
    <ul ng-repeat = "i in Arr">
        <li>{{i}}</li>
    </ul>
</body>
<script>
    var app = angular.module('myapp', []);
    app.controller('TestController', function($scope) {
        $scope.Arr = ['arr1','arr2','arr3'];
    });
</script>
</html>

2：表格循環(huán)綁定二維數(shù)組

PS：{{循環(huán)步增名[下標]}}
<!doctype html>
<html ng-app = "myapp" ng-controller = "TestController">
<head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>name:</th>
                <th>age:</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat = "a in ArrT">
                <td>{{a[0]}}</td>
                <td>{{a[1]}}</td>
            </tr>
        </tbody>
    </table>
</body>
<script>
    var app = angular.module('myapp', []);
    app.controller('TestController', function($scope) {
        $scope.ArrT = [
            ['jack',15],
            ['Tom',20],
        ];
    });
</script>
</html>

3：循環(huán)綁定對象數(shù)組，并且對其進行排序和搜索

PS：{{步增名.對象鍵名}}
PS： orderBy:['排序對象鍵名','-排序對象鍵名'] 可以排序多個條件，如果要倒敘就以 - 開頭。
PS： filter:{ } 搜索關鍵字，可以數(shù)字、字符串、對象鍵值。
PS：$index 這個是自動生成ID的關鍵以0開始。
<!doctype html>
<html ng-app = "myapp" ng-controller = "TestController">
<head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>name:</th>
                <th>age:</th>
                <th>work</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat = "o in ArrObj | orderBy:['age','-work'] | filter:22 | filter:{Name:Tc} ">
                <td>{{$index + 1}}</td>
                <td>{{o.Name}}</td>
                <td>{{o.Age}}</td>
                <td>{{o.work}}</td>
            </tr>
        </tbody>
    </table>
</body>
<script>
    var app = angular.module('myapp', []);
    app.controller('TestController', function($scope) {
        $scope.ArrObj = [
            {Name:'jerry',Age:22,work:4},
            {Name:'Toonz',Age:13,work:2},
            {Name:'Tc',Age:22,work:3},
        ];
    });
</script>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容