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 相关文章推荐
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
Position属性之relative用法
Dec 14 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
js初始化验证实例详解
Nov 26 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
原生js实现下拉框选择组件
Jan 20 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
上传多个文件的PHP脚本
2006/11/26 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python实现五子棋小程序
2019/06/18 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
教师研修随笔感言
2014/01/23 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
七年级生物教学反思
2014/01/30 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
MySQL之DML语言
2021/04/05 MySQL