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 相关文章推荐
DOM精简教程
Oct 03 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP抽象类 介绍
2012/06/13 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php析构函数的简单使用说明
2015/08/24 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
js控制框架刷新
2008/08/01 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
python实现简单的TCP代理服务器
2014/10/08 Python
python比较两个列表是否相等的方法
2015/07/28 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
python单例设计模式实现解析
2020/01/07 Python
python数字类型math库原理解析
2020/03/02 Python
python如何更新包
2020/06/11 Python
高中军训感言1000字
2014/03/01 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
学术诚信承诺书
2014/05/26 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2016年寒假见闻
2015/10/10 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python