AngularJS 中的数据源的循环输出


Posted in Javascript onOctober 12, 2017

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里面,在对类别中的具体数据进行循环输出

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 #Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 #Javascript
Angular实现预加载延迟模块的示例
Oct 12 #Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 #Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 #Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 #Javascript
You might like
编译问题
2006/10/09 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
遍历jquery对象的代码分享
2011/11/02 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
请解释流与文件有什么不同
2016/07/29 面试题
会计工作心得体会
2014/01/13 职场文书
保险专业自荐信范文
2014/02/20 职场文书
《开国大典》教学反思
2014/04/19 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
Golang 字符串的常见操作
2022/04/19 Golang