Angular ng-repeat 对象和数组遍历实例


Posted in Javascript onSeptember 14, 2016

直接上代码

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Ngrepeat in obj and arr]">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>

 
 <div ng-app="myApp">
  <div ng-controller="testCtrl">{{test1}}
    <div>
      <label for="" ng-repeat="item in list1">{{item.id}} -- {{item.value}}</label>
      <p></p>
      
      <label for="" ng-repeat="(key, value) in obj1">{{key}} -- {{value}}</label>
      <p>
        
      </p>
      对于obj遍历的话 会根据key的首字母排序
      <label for="" ng-repeat="(key, value) in obj2">
        {{key}} -- {{value.text}} -- {{value.value}}
      </label>
      
    </div>
  </div>
</div>
 
 
</body>
</html>

JS

var app = angular.module(‘myApp‘, []);
app.controller(‘testCtrl‘, function ($scope) {
  $scope.test1 = ‘tt‘;
  $scope.list1 = [{
    id: ‘1‘,
    value: ‘seti‘
  }, {
    id: ‘2‘,
    value: ‘kuma‘
  }, {
    id: ‘3‘,
    value: ‘cent‘
  }];
  $scope.obj1 = {
    ‘1‘: ‘seti‘,
      ‘2‘: ‘kuma‘,
      ‘3‘: ‘cent‘
  };
  $scope.obj2 = {
    ‘ins‘:{text:‘seti‘, value:‘s1‘},
    ‘abc‘:{text:‘kuma‘, value:‘s2‘},
    ‘coln‘:{text:‘cent‘, value:‘s3‘}
  };
});
Javascript 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
js解决movebox移动问题
Mar 29 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
React优化子组件render的使用
May 12 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 #Javascript
利用bootstrapValidator验证UEditor
Sep 14 #Javascript
JavaScript鼠标特效大全
Sep 13 #Javascript
javascript表单控件实例讲解
Sep 13 #Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 #Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 #Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
php URL跳转代码 减少外链
2011/06/25 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python ddt实现数据驱动
2018/03/14 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
应届医学毕业生求职信分享
2013/12/02 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
法人委托书范本
2014/09/15 职场文书
学习党章心得体会2016
2016/01/15 职场文书
初三数学教学反思
2016/02/17 职场文书
银行求职信范文
2019/05/13 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
MySQL系列之十一 日志记录
2021/07/02 MySQL
python双向链表实例详解
2022/05/25 Python