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里面，在对类别中的具体数据进行循环输出
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了Ionic+AngularJS实现登录和注册带验证功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要为大家介绍了Angular中AuthGuard路由守卫的创建使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
这篇文章主要介绍了Angular搜索场景中使用rxjs的操作符处理思路,主要的思路就是通过Subject来发送过滤条件，这样就可以使用rxjs的各种操作符，可以快捷很多。需要的朋友可以参考下2018-05-05
详解什么是@ngrx/store开发包中的MemoizedSelector
这篇文章主要为大家介绍了@ngrx/store开发包中的MemoizedSelector使用分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
这篇文章主要介绍了使用AngularJS处理单选框和复选框的方法,在AngularJS表单的基础之上编写起来非常简单,需要的朋友可以参考下2015-06-06
这篇文章主要给大家介绍了关于angularjs请求数据的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angularjs具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
本篇文章主要介绍了详解angularjs 学习之 scope作用域，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
angularJs使用$watch和$filter过滤器制作搜索筛选实例
本篇文章主要介绍了angularJs使用$watch和$filter过滤器制作搜索筛选实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本篇文章主要介绍了angular仿支付宝密码框输入效果，详细的介绍了使用ng写一个密码框格子支付模块，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
本篇文章主要介绍了浅谈angularr4生命周期钩子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论