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 相关文章推荐
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
浅析javascript的return语句
Dec 15 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
node中的cookie的具体使用
Sep 13 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
使用webpack搭建pixi.js开发环境
Feb 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
Python如何实现定时器功能
2020/05/28 Python
入党积极分子介绍信
2014/01/17 职场文书
小学毕业感言150字
2014/02/05 职场文书
运动员口号
2014/06/09 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
详解Vue的options
2021/05/15 Vue.js
Python实现简繁体转换
2021/06/07 Python
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS