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 相关文章推荐
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
javascript数组的使用
Mar 28 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 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
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python实现ID3决策树算法
2018/08/29 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
信电学院毕业生自荐书
2014/05/24 职场文书
公司员工安全协议书
2014/11/21 职场文书
体检通知范文
2015/04/21 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
Mysql Show Profile
2021/04/05 MySQL