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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
js中this对象用法分析
Jan 05 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php 全局变量范围分析
2009/08/07 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
使用python实现扫描端口示例
2014/03/29 Python
Python中encode()方法的使用简介
2015/05/18 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
中英文自我评价语句
2013/12/20 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
工会工作先进事迹
2014/08/18 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
不同意离婚代理词
2015/05/23 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL