AngularJS教程 AngularJS从0到1——AngularJS数组遍历
来源:互联网 发布:java nio attach 编辑:程序博客网 时间:2024/06/04 19:25
一、概述
AngularJS在数组遍历方面也有天然的优势,其内置的指令帮我们节省了大量时间和精力。
也许你会问,为什么需要再页面上用js进行遍历呢?不是有服务器后端语言吗?
这里请注意,AngularJS最擅长的是单页面应用,比如用AngularJS做微信页面开发就很方便。有了Angular,很多时候我们根本不需要在页面上使用服务端语言(如Java或者PHP),当然这对于多页面应用程序而言并非最佳选择。
另外,通过使用AngularJS+HTML+HBuilder工具,我们可以很轻易做出非原生的客户端APP,并且可以直接发布为iOS和Android两个版本,极大程度降低了开发成本。
二、示例
要求:根据学生信息数据,循环遍历显示学生学号、姓名、成绩。
<!DOCTYPE html><html ng-app="studentApp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> angular.module('studentApp',[]) .controller('StudentCtrl',[function(){ var self = this; self.students = [ { 'id':'20170111', 'name':'唐珊', 'age':20, 'grade':98, 'leader':true, 'gender':'女' }, { 'id':'20170112', 'name':'刘星', 'age':21, 'grade':88, 'leader':false, 'gender':'男' }, { 'id':'20170113', 'name':'宋岩', 'age':20, 'grade':98, 'leader':true, 'gender':'男' }, { 'id':'20170114', 'name':'马菲', 'age':20, 'grade':99, 'leader':false, 'gender':'女' } ] }]); </script> </head> <body ng-controller="StudentCtrl as ctrl"> <table> <tr ng-repeat="student in ctrl.students"> <td ng-bind="student.id"></td> <td ng-bind="student.name"></td> <td ng-bind="student.grade"></td> <td ng-bind="student.gender"></td> <td><span ng-show="student.leader">组长</span></td> </tr> </table> </body></html>
我们来分析一下这两段代码。
javascript代码中,主要就是定义了angular模块、控制器和一个数组。
html代码中循环遍历并展示了学生信息。
这里用到的核心指令是ng-repeat
。
另外还用到一个指令是ng-show
,这个指令接收一个boolean类型的值,如果接收值为true则显示内容,否则不显示。在实际开发过程中,这个指令也通常用来显示对话框、消息提示框等。
除了核心指令外,angularjs迭代器还特意准备了丰富的辅助指令,如:
- $first//第一行,true or false - $middle//中建行,true or false - $last//最后一行,true or false - $index//索引,返回数字 - $even//偶数行,true or false,注意第一行是0,为偶数,返回true - $odd//奇数行,true or false
三、指令整理
- ng-repeat
- ng-show
四、美图欣赏
0 0
- AngularJS教程 AngularJS从0到1——AngularJS数组遍历
- AngularJS教程 AngularJS从0到1——HelloWorld
- AngularJS教程 AngularJS从0到1——初识AngularJS
- AngularJS教程 AngularJS从0到1——AngularJS模块
- AngularJS教程 AngularJS从0到1——AngularJS控制器
- AngularJS教程 AngularJS从0到1——AngularJS服务
- AngularJS遍历数组
- 从Knockout到AngularJS
- AngularJS——1
- 1、Angularjs — 简介
- AngularJS
- angularjs
- Angularjs
- angularJS
- AngularJS
- AngularJS
- AngularJS
- AngularJs
- Orace用户创建及权限分配
- Android沉浸式(透明)状态栏
- Order By 问题集合
- django加载本地html
- java基础冷知识
- AngularJS教程 AngularJS从0到1——AngularJS数组遍历
- 一共有n个人,给定m对好友关系,好友的好友也算一个朋友圈,问n个人中一共有几个朋友
- N皇后问题最简单解法
- getResources().getColor()方法过时的替代方法
- 运维学习笔记1~100
- 170425 汇编-实验11和内中断初识
- Java阶段总结
- 阿里面试题总结
- JavaWeb三大组件