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

前端之家收集整理的这篇文章主要介绍了AngularJS教程 AngularJS从0到1——AngularJS数组遍历前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、概述

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':'宋岩',{ 'id':'20170114','name':'马菲','grade':99,'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
  • @H_523_301@

    四、美图欣赏

原文链接:https://www.f2er.com/angularjs/147423.html

猜你在找的Angularjs相关文章