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 IE 与 FF中兼容问题小结
Feb 18 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
js自定义input文件上传样式
Oct 26 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 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
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
详解React 条件渲染
2020/07/08 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
python解析xml模块封装代码
2014/02/07 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python获取array中指定元素的示例
2019/11/26 Python
python的faker库用法
2019/11/28 Python
Pytorch 实现权重初始化
2019/12/31 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
十岁生日同学答谢词
2014/01/19 职场文书
校庆活动方案
2014/03/31 职场文书
《悯农》教学反思
2014/04/28 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
会计简历自我评价
2015/03/10 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
导游词之无锡古运河
2019/11/14 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫