ng-repeat 與ng-switch的簡單應用

時間 2019-11-13

標籤 repeat switch 簡單應用简体版

原文原文鏈接

效果以下圖所示：css

使用表格顯示用戶信息，當點擊某條用戶信息時，在其下方展開一行進行展現。html

index.htmljava

<!DOCTYPE html>

<html ng-app="myApp">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../css/uikit.css"/>
        <link rel="stylesheet" href="../css/my-uikit.css"/>
    </head>
    <body>
        
        <div class="uk-panel" ng-controller="UserCtrl">
            <table class="uk-table uk-table-hover uk-table-striped">
                <thead class="uk-bg-primary">
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody ng-repeat="user in users" ng-click="selectUser(user)" 
                       ng-switch on="isSelected(user)">
                    <tr>
                        <td>{{user.name}}</td>
                        <td>{{user.email}}</td>
                    </tr>
                    <tr ng-switch-when="true">
                        <td colspan="2" class="uk-bg-success">{{user.desc}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
    </body>
    
    <script src="../js/angular.js"></script>
    <script src="index.js"></script>
</html>

index.jsapp

var myApp = angular.module('myApp', []);

myApp.controller('UserCtrl', ['$scope', function($scope){
        $scope.users = [
            {
                name:'張三',
                email:'zhangsan@gmail.com',
                desc: '張三的詳細信息...'
            },
            {
                name:'李四',
                email:'lisi@123.com',
                desc: '李四的詳細信息...'
            },
            {
                name:'王五',
                email:'wangwu@qq.com',
                desc: '王五的詳細信息...'
            }
        ];
        
        $scope.selectUser = function(user){
            $scope.selectedUser = user;
        };
        
        $scope.isSelected = function(user){
            return $scope.selectedUser === user;
        };
}]);

:ng-repeat指令用於渲染集合元素，並持續監視數據源的變化，只要數據源發生變化，其會當即從新渲染視圖模板，ng-repeat通過了高度的優化，以便於對DOM書的影響最小化。優化

:ng-switch on 結合ng-switch-when使用，還有ng-switch-default，其用法與java重點switch用法差很少，on用於制定參數值，ng-switch-when相似於case 。ui

相關標籤/搜索

每日一句

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