AngularJS教程 AngularJS从0到1——AngularJS数组遍历

最新推荐文章于 2021-06-05 01:52:34 发布

3052world

最新推荐文章于 2021-06-05 01:52:34 发布

阅读量3.1k

点赞数

分类专栏：学习笔记 AngularJS AngularJS从0到1教程文章标签： angularjs angular

本文链接：https://blog.csdn.net/jasper_success/article/details/70767669

版权

学习笔记同时被 3 个专栏收录

107 篇文章 1 订阅

订阅专栏

AngularJS

6 篇文章 0 订阅

订阅专栏

AngularJS从0到1教程

6 篇文章 0 订阅

订阅专栏

一、概述

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