基本介绍

（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——流程控制指令的更多相关文章

  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. 洛谷—— P2196 挖地雷

    https://www.luogu.org/problem/show?pid=2196 题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定 ...

  2. Codeforces Round #403(div 2)

    A =w= B 题意:一个数轴上有n个整点,每个点都有一个速度,选一个点让他们集合,使得时间最少. 分析: 直接三分 C 题意:给定一棵树,任意两个距离小等于二的点不能染相同的颜色,求最小颜色数和染色 ...

  3. [Vue @Component] Extend Vue Components in TypeScript

    This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...

  4. 开发汉澳sinox64位，对接汉澳矩阵电脑

    汉澳矩阵电脑刚刚不久前提出,即使全然设计出了汉澳矩阵电脑线路图,要在上面执行操作系统必须有矩阵操作系统. 汉澳sinox64位操作系统并非矩阵操作系统,仅仅是更为接近. 汉澳矩阵电脑假设插有16个矩阵 ...

  5. Xcode9自带版本控制系统(Git)的使用

    情形一:新项目工程 前提是首先你得有个Github账号. 1.创建新工程,选中使用git,创建本地仓库. 2.在偏好设置添加git账号. 3.创建Github远程仓库,xcode会自动帮你在Githu ...

  6. Android之实现ViewPager+Fragment左右滑动

    近期看新闻发现新闻的页面是能够左右滑动的.于是自己就好奇起来了,之前做过ViewPager展示图片,在想怎么载入页面呢?研究了一下.发现就是加入了Fragment,废话不多说,揭秘奥秘的时候到了. 使 ...

  7. 在Java中实现UDP协议编程（DatagramSocket/DatagramPacket）

    1.什么是UDP协议? UDP( User Datagram Protocol )协议是用户数据报,在网络中它与TCP协议一样用于处理数据包.在OSI模型中,在第四层——传输层,处于IP协议的上一层. ...

  8. java使用poi读取word（简单，简约，直观）

    java使用poi读取word(简单,简约,直观) 说明 其实poi的官网上面都是有接口和样例的,只是都是英文 例如网址:http://poi.apache.org/spreadsheet/quick ...

  9. B4197 [Noi2015]寿司晚宴 状压dp

    这个题一开始想到了唯一分解定理,然后状压.但是显然数组开不下,后来想到每个数(n<500)大于19的素因子只可能有一个,所以直接单独存就行了. 然后正常状压dp就很好搞了. 题干: Descri ...

  10. [luogu_U15118]萨塔尼亚的期末考试

    https://zybuluo.com/ysner/note/1239615 题面 \(T\)次询问,求出\[\sum_{i=1}^n\frac{i}{\frac{n(n+1)}{2}}fib_i\] ...