AngularJS 中的数据源的循环输出
AngularJS 中的数据源的循环输出
最近也是刚刚接触angular前端框架的，但使用的几天就感觉效果比较明显，尤其是在数据的输出效果上来看，比原生的js的编程效率要高许多，所以这也就是为什么许多公司都要求前端开发需要你熟悉使用前端框架了，可以更快的提高项目的效率。今天想要说的就是在使用angular前端框架的时候的数据源的循环输出。
把数组中的数据循环输出到页面上，如果使用的js的方法的话就是需要对数组进行for循环输出，并且在输出的时候是对页面中的DOM层中的节点进行操作的，而如果使用前端框架的话（angular），它里面已经封装好了数据循环输出的指令，即ng-repeat。
<ul>
<li ng-class="idx==$index?'color1':'color2'" ng-repeat=" item in book track by $index">{{item.name}}{{$index}}</li>
</ul>
这里面就是对数组book中的数据进行循环输出，使用框架里面封装好的指令都是它特有的前面是ng-来说明标注的，就像在微信开发中使用里面的指令的时候前面有wx-来标注说明一样的效果。
但如果你的界面涉及到tab栏的切换，界面可能会出现像左边是种类右边是具体种类所对应的数据时的话呢，即你的数据是可能类似于
$scope.book=[{idx:7,name:"军事",value:[{name:'美国的城市政治',price:37},{name:'兵法简述',price:45},{name:'国防论',price:14},{name:'总体战',price:13},{name:'海军战略论',price:11}]},
{idx:8,name:"情感",value:[{name:'三体',price:12}]}]
如何把军事所对应的具体数据显示在界面上，或者把情感所对应的具体数据显示在界面的上的话，其实就是根据数据的分类来进行分类输出数据
<ul>
<li ng-repeat=" item in book track by $index">
<ul>
<li ng-class="'color2'" ng-repeat=" items in item.value|page:nowpage:3">
{{items.name}}
<span class="price">价格：{{items.price|currency:'￥'}}</span>
<button ng-click="add($index)">添加至购物车</button>
</li>
</ul>
</li>
</ul>
这样输出的效果就是根据数据中的分类来把数据进行分类输出，即一个两层的嵌套循环，第二层循环的数据是第一次循环之后的结果，这样就可以把一种类别的数据输出到li下面的ul里面，在对类别中的具体数据进行循环输出
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了再谈Angular4 脏值检测(性能优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了Angular在一个页面中使用两个ng-app的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
详解Angular系列之变化检测(Change Detection)
这篇文章主要介绍了详解Angular系列之变化检测(Change Detection)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了AngularJS实现网站换肤的简单实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
AngularJS $http post 传递参数数据的方法
今天小编就为大家分享一篇AngularJS $http post 传递参数数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
本篇文章主要介绍了动手写一个angular版本的Message组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
下面小编就为大家带来一篇angular select 默认值设置方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本文主要给大家汇总了一下angular.element的方法，十分的详细，这里推荐给大家 参考下。2015-01-01
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
下面小编就为大家带来一篇Angularjs中的事件广播 —全面解析$broadcast,$emit,$on。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
这篇文章主要介绍了Angular使用过滤器uppercase/lowercase实现字母大小写转换功能,涉及AngularJS过滤器针对字符串转换的简单使用技巧,需要的朋友可以参考下2018-03-03
最新评论