• 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>
  • 相关阅读:
    hdu1247 字典树或者hash
    hdu1247 字典树或者hash
    hdu1251 hash或者字典树
    hdu1251 hash或者字典树
    hdu4421 2-sat(枚举二进制每一位)
    hdu4421 2-sat(枚举二进制每一位)
    poj3648 2-sat
    poj3648 2-sat
    hdu 1814 字典序最小的2sat(暴力深搜)
    hdu 1814 字典序最小的2sat(暴力深搜)
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/8410517.html
Copyright © 2020-2023  润新知