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>
Angular——流程控制指令的更多相关文章
- angular流程引擎集成
工作流在oa和erp中十分常见,现有成熟的工作流通常是在客户端实现的,web实现工作流的案例十分稀少.要实现web工作流必须要有强大的流程设计器,这里为大家介绍一款基于angular的流程控件,其功能 ...
- PHP中break及continue两个流程控制指令解析
<?php $arr = array( 'a' => '0a0', 'b' => '0b0', 'c' => '0c0', 'd' => '0d0', 'e' => ...
- python 学习之 基础篇三 流程控制
前言: 一. python中有严格的格式缩进,因为其在语法中摒弃了“{}”来包含代码块,使用严格的缩进来体现代码层次所以在编写代码的时候项目组要严格的统一器缩进语法,一个tab按键设置为四个空格来缩进 ...
- Vue.js学习 Item13 – 指令系统与自定义指令
基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- Vue1.0用法详解
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...
- Python开发【第二篇】：Python基础知识
Python基础知识 一.初识基本数据类型 类型: int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位 ...
- 【初恋】vue单页应用开发总结
vue新人,没有高级技巧 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结. 技术栈: Vue v1.0.21, vue-resource v0.9 ...
- Python开发【第一篇】：初识Python
初识python 一.python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...
随机推荐
- JVM即时编译（JIT）
Java解释执行过程: 代码装入-代码校验-代码执行 Java字节码的执行方式分为两种:即使编译方式和解释执行方式.即时编译是值解释器先将字节码编译成机器码,然后执行该机器码.解释执行的方式是指解释器 ...
- Domino V8 在 UNIX/Linux 平台上的安装及其常见问题
在 IBM Bluemix 云平台上开发并部署您的下一个应用. 开始您的试用 Domino V8 的安装需求 Domino V8 可以支持多种平台和操作系统,表1 列出了其支持的各种 UNIX/Lin ...
- 为XCode 6 加入新建类模板
用XCode 6在改动之前用XCode 5 的代码的时候突然间发现 XCode 6已经把新建带有 .xib 类的模板给删去了.而项目的新需求中又要用到新建带有 .xib 的类(用惯了~),全部不得不又 ...
- C++学习之函数模板与类模板
泛型编程(Generic Programming)是一种编程范式,通过将类型参数化来实现在同一份代码上操作多种数据类型,泛型是一般化并可重复使用的意思.泛型编程最初诞生于C++中,目的是为了实现C++ ...
- C - The C Answer (2nd Edition) - Exercise 1-15
/* Rewrite the temperature conversion program of Section 1.2 to use a function for conversion. */ #i ...
- linux驱动之LED驱动_1
步骤: 1.框架 2.完好硬件的操作: a.看原理图.引脚 b.看2440手冊 c.写代码: IO口须要用ioremap映射 我的板子电路例如以下所看到的 1.配置GPBCON 寄存器,配置输出 ...
- mySql学习笔记：比sql server书写要简单
在学mySql.总的感觉,mySql与Sql Server差不多,语法都很象,但mySql也许是吸取了SQL SERVER的一些经验,SQL语句书写起来更加简单. 比如说,设置主键.索引,SQL SE ...
- MySQL运行计划初探
-Mysql运行计划总结– 1 运行计划概述 先看看一个运行计划 mysql> explain SELECT * FROM EMP , DAO_OBJECTS t1 , DAO_OBJECTS ...
- ROS人脸检测 使用webcam实现
github地址https://github.com/ngunauj/facedetection 熟悉ros环境.ubuntu16.04 + ros kinetic版本.使用笔记本自带摄像头,完成人脸 ...
- [1525] Cow Xor
问题描述 农民约翰在喂奶牛的时候被另一个问题卡住了.他的所有N(1 <= N <= 100,000)个奶牛在他面前排成一行(按序号1..N的顺序),按照它们的社会等级排序.奶牛#1有最高的 ...