基本介绍

（1）ng-repeat，类似于for循环，对数组进行遍历

（2）ng-switch on，ng-switch-when，类似于switch，case

基本使用

ng-repeat

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body ng-app="App">
  8. <table ng-controller="DemoController">
  9.     <tr ng-repeat="(key,value) in values">
  10.         <td>{{value.name}}</td>
  11.         <td>{{value.age}}</td>
  12.         <td>{{value.gender}}</td>
  13.     </tr>
  14. </table>
  15. <script src="../libs/angular.min.js"></script>
  16. <script>
  17.     var App = angular.module('App', []);
  18.     App.controller('DemoController', ['$scope', function ($scope) {
  19.         $scope.values = [
  20.             {name: 'wqx', age: 18, gender: '男'},
  21.             {name: 'wx', age: 18, gender: '男'},
  22.             {name: 'qx', age: 18, gender: '男'},
  23.             {name: 'w', age: 18, gender: '男'}
  24.         ];
  25.     }]);
  26. </script>
  27. </body>
  28. </html>

ng-switch

（1）循环遍历的过程中，只有满足条件的才会显示

（2）on是可以被省略的

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="App">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../libs/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-controller="DemoController">
  10.     <div ng-repeat="(key,student) in students" ng-switch="student">
  11.         <h2 ng-switch-when="er2">{{student}}</h2>
  12.     </div>
  13. </div>
  14. <script>
  15.     var App = angular.module('App', []);
  16.     App.controller('DemoController', ['$scope', function ($scope) {
  17.         $scope.students = ['er1', 'er2', 'er3', 'er4'];
  18.     }]);
  19.     //ng-switch on  :  on是可以省略的
  20.     //ng-switch-when ：满足条件才显示后面的值
  21. </script>
  22. </body>
  23. </html>

Angular——流程控制指令的更多相关文章

  1. angular流程引擎集成

    工作流在oa和erp中十分常见,现有成熟的工作流通常是在客户端实现的,web实现工作流的案例十分稀少.要实现web工作流必须要有强大的流程设计器,这里为大家介绍一款基于angular的流程控件,其功能 ...

  2. PHP中break及continue两个流程控制指令解析

    <?php $arr = array( 'a' => '0a0', 'b' => '0b0', 'c' => '0c0', 'd' => '0d0', 'e' => ...

  3. python 学习之 基础篇三 流程控制

    前言: 一. python中有严格的格式缩进,因为其在语法中摒弃了“{}”来包含代码块,使用严格的缩进来体现代码层次所以在编写代码的时候项目组要严格的统一器缩进语法,一个tab按键设置为四个空格来缩进 ...

  4. Vue.js学习 Item13 – 指令系统与自定义指令

    基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...

  5. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  6. Vue1.0用法详解

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...

  7. Python开发【第二篇】：Python基础知识

    Python基础知识 一.初识基本数据类型 类型: int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位 ...

  8. 【初恋】vue单页应用开发总结

    vue新人,没有高级技巧 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结. 技术栈: Vue v1.0.21, vue-resource v0.9 ...

  9. Python开发【第一篇】：初识Python

    初识python 一.python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

随机推荐

  1. 洛谷—— P1657 选书

    https://www.luogu.org/problem/show?pid=1657 题目描述 学校放寒假时,信息学奥赛辅导老师有1,2,3……x本书,要分给参加培训的x个人,每人只能选一本书,但是 ...

  2. [CH#56]过河（贪心）

    题目:http://ch.ezoj.tk/contest/CH%20Round%20%2356%20-%20%E5%9B%BD%E5%BA%86%E8%8A%82%E6%AC%A2%E4%B9%90% ...

  3. lombok中的@ToString注解作用

    Lombok是一个很好的工具,节省了很多重写方法,而@ToString就是节省了ToString方法,lombok中@ToString就是节省了我们在模型中的冗余代码下面就来举个例子 import j ...

  4. 11、Java并发性和多线程-Java内存模型

    以下内容转自http://ifeve.com/java-memory-model-6/: Java内存模型规范了Java虚拟机与计算机内存是如何协同工作的.Java虚拟机是一个完整的计算机的一个模型, ...

  5. vim 快速搜索的快捷键

    当光标在某个单词上面的时候 按 shift + #键(或 shift + * )就可以了!!! ----------------------------------- If you are worki ...

  6. vsftpd conf 解釋

    Linux中vsFTP位置约定:/usr/sbin/vsftpd ---- VSFTPD的主程序/etc/rc.d/init.d/vsftpd ---- 启动脚本/etc/vsftpd/vsftpd. ...

  7. nmap，port扫描，获取sshserver的ip地址

    // 查看局域网的ip地址 arp - a // 同一个网段.假设用虚拟机桥接则不行 sudo nmap -sS 192.168.1.* //或者sudo nmap -sS -p 22 192.168 ...

  8. 【Linux命令】--（1）文件文件夹操作命令15条

    文件文件夹操作命令++++++++++++++++++++++++++++++++++++++++ 列出进入显示文件夹     ls cd pwd  创建移动删除文件     mkdir rm rmd ...

  9. Android自己定义提示框

    在开发中,假设感觉系统自带的提示框不好看,开发人员能够自定义提示框的样式.主要是继承Dialog 程序文件夹结构 关键代码 package com.dzt.custom.dialog; import ...

  10. Android开发之使用sqlite3工具操作数据库的两种方式

    使用 sqlite3 工具操作数据库的两种方式 请尊重他人的劳动成果,转载请注明出处:Android开发之使用sqlite3工具操作数据库的两种方式 http://blog.csdn.net/feng ...