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中构建ArrayList示例代码
Sep 17 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
Ajax常用封装库——Axios的使用
May 08 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
深入理解Django的中间件middleware
2018/03/14 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
python操作链表的示例代码
2020/09/27 Python
opencv实现图像几何变换
2021/03/24 Python
客服部工作职责范本
2014/02/14 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
公司证明怎么写
2014/09/22 职场文书
2015年团支部工作总结
2015/04/03 职场文书
军事理论课感想
2015/08/11 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
使用pytorch实现线性回归
2021/04/11 Python