加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 23:17:46 所属栏目:百科 来源:网络整理
导读:本篇章节讲解AngularJS ng-repeat指令及Ajax的应用。供大家参考研究具体如下: 定义: 说明: 下面通过一个例子,来说明ng-repeat如何绘制一个表格: 名字 标记 表可以使用CSS样式设置样式。 利用angularjs的ng-repeat指令绘制表格: 效果: 上面例

本篇章节讲解AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考,具体如下:

定义:

说明:

下面通过一个例子,来说明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程序设计有所帮助。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

标记