ng-repeat 与ng-switch的简单应用
生活随笔
收集整理的這篇文章主要介紹了
ng-repeat 与ng-switch的简单应用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果如下圖所示：
使用表格顯示用戶信息，當點擊某條用戶信息時，在其下方展開一行進行展示。
index.html
<!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.js
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 。
轉載于:https://www.cnblogs.com/yshyee/p/4273061.html
總結
以上是生活随笔為你收集整理的ng-repeat 与ng-switch的简单应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TrimPath - Js模板引擎
- 下一篇： POJ 1273 (基础最大流) Dra