Angular——流程控制指令

基本介绍

（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>

 

posted @ 2018-02-03 19:24  var_obj  阅读(189)  评论(0)  编辑  收藏  举报