基本介绍
(1)ng-repeat,类似于for循环,对数组进行遍历
(2)ng-switch on,ng-switch-when,类似于switch,case
基本使用
ng-repeat
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-app="App"> <table ng-controller="DemoController"> <tr ng-repeat="(key,value) in values"> <td>{{value.name}}</td> <td>{{value.age}}</td> <td>{{value.gender}}</td> </tr> </table> <script src="../libs/angular.min.js"></script> <script> var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope) { $scope.values = [ {name: 'wqx', age: 18, gender: '男'}, {name: 'wx', age: 18, gender: '男'}, {name: 'qx', age: 18, gender: '男'}, {name: 'w', age: 18, gender: '男'} ]; }]); </script> </body> </html>
ng-switch
(1)循环遍历的过程中,只有满足条件的才会显示
(2)on是可以被省略的
<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../libs/angular.min.js"></script> </head> <body> <div ng-controller="DemoController"> <div ng-repeat="(key,student) in students" ng-switch="student"> <h2 ng-switch-when="er2">{{student}}</h2> </div> </div> <script> var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope) { $scope.students = ['er1', 'er2', 'er3', 'er4']; }]); //ng-switch on : on是可以省略的 //ng-switch-when :满足条件才显示后面的值 </script> </body> </html>