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>
原文地址:https://www.cnblogs.com/wuqiuxue/p/8410517.html