AngularJS ng-repeat指令及Ajax的应用实例分析

前端之家收集整理的这篇文章主要介绍了AngularJS ng-repeat指令及Ajax的应用实例分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考,具体如下:

输出指定次数的 HTML 元素。集合必须是数组或对象。

定义:

说明:

RSSion表达式定义了如何循环集合。常用的如:x in records

下面通过一个例子,来说明ng-repeat如何绘制一个表格:

名字

表可以使用CSS样式设置样式。

table,th,td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; }

利用angularjs的ng-repeat指令绘制表格:

var mainApp=angular.module('mainApp',[]); //定义一个名为mainApp的模块 mainApp.controller('studentController',function($scope){ $scope.student={ firstName:'聂',lastName:'鹏飞',subjects:[ {name:'物理',marks:73},{name:'化学',marks:90},{name:'数学',marks:68},{name:'英文',marks:85},{name:'生物',marks:77},],fullName:function(){ var studentObject; studentObject = $scope.student; return studentObject.firstName+' '+studentObject.lastName; } }; });

效果

上面例子表格中展示的数据也可以通过ajax请求从服务器中获取,然后利用ng-repeat指令插入到页面中,具体实现见下面代码:

Angular JS Controller

说明:

需要放在服务器环境中运行

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《

希望本文所述对大家AngularJS程序设计有所帮助。

原文链接:https://www.f2er.com/ajax/38060.html

猜你在找的Ajax相关文章

标记