这篇文章主要介绍了AngularJS ng-repeat指令及Ajax的应用,结合实例形式分析了ng-repeat指令的功能及ajax请求交互相关操作技巧,需要的朋友可以参考下
本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考，具体如下：
ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。
定义：
说明：experssion表达式定义了如何循环集合。常用的如：x in records
下面通过一个例子,来说明ng-repeat如何绘制一个表格：
<div> <table border="0"> <tr> <td>姓</td><td></td></tr><tr> <td>名</td><td></td></tr><tr> <td>名字</td><td>{{student.fullName()}}</td></tr><tr> <td>科目</td><td> <table> <tr> <th>名字</th><th>标记</th></tr><tr> <td>{{sub.name}}</td><td>{{sub.marks}}</td></tr></table></td></tr></table></div>
表可以使用CSS样式设置来源gaodaimacom搞#^代%!码网样式。
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指令绘制表格:
上面例子表格中展示的数据也可以通过ajax请求从服务器中获取，然后利用ng-repeat指令插入到页面中，具体实现见下面代码:
<title>Angular JS Controller</title> 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; } <h2>AngularJS 表格应用示例</h2><div> <table border="0"> <tr> <td>姓</td><td></td></tr><tr> <td>名</td><td></td></tr><tr> <td>名字</td><td>{{student.fullName()}}</td></tr><tr> <td>科目</td><td> <table> <tr> <th>名字</th><th>标记</th></tr><tr> <td>{{sub.name}}</td><td>{{sub.marks}}</td></tr></table></td></tr></table></div>
说明：需要放在服务器环境中运行
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
以上就是AngularJS ng-repeat指令及Ajax的应用实例分析的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：AngularJS ng-repeat指令及Ajax的应用实例分析
转载请注明原文链接：AngularJS ng-repeat指令及Ajax的应用实例分析
