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 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
Js四则运算函数代码
Jul 21 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 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 adodb连接不同数据库
2009/03/19 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
调整PHP的性能
2013/10/30 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
深入理解React高阶组件
2017/09/28 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python实现文件的备份流程详解
2019/06/18 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
主题婚礼策划方案
2014/02/10 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
个人股份合作协议书
2014/10/24 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
情人节活动总结范文
2015/02/05 职场文书
培根随笔读书笔记
2015/07/01 职场文书
品德与社会教学反思
2016/02/24 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书