码迷,mamicode.com
首页 > 其他好文 > 详细

Angular——流程控制指令

时间:2018-02-03 20:51:01      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:col   script   doctype   body   student   html   pos   for循环   lan   

基本介绍

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

 

Angular——流程控制指令

标签:col   script   doctype   body   student   html   pos   for循环   lan   

原文地址:https://www.cnblogs.com/wuqiuxue/p/8410517.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!