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 EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
javascript数组去重小结
Mar 07 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
一步一步封装自己的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开发工具之vs2005图解
2008/01/12 PHP
PHP对象相关知识总结
2017/04/09 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
javascript基本类型详解
2014/11/28 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
浅析使用Python操作文件
2017/07/31 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
python如何快速生成时间戳
2020/07/21 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
python excel多行合并的方法
2020/12/09 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
数据库连接池的工作原理
2012/09/26 面试题
会计专业应届生自荐信
2014/02/07 职场文书
住宅使用说明书
2014/05/09 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
vue 自定义组件添加原生事件
2022/04/21 Vue.js