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 相关文章推荐
iphone safari不支持position fixed的解决方法
May 04 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
简单的js表格操作
Sep 24 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
详解vue中的computed的this指向问题
Dec 05 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
php代码书写习惯优化小结
2013/06/20 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
GreyBox技术总结(转)
2010/11/23 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python对象转换为json的方法步骤
2019/04/25 Python
Tensorflow 多线程设置方式
2020/02/06 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
教师个人考察材料
2014/12/16 职场文书
angular4实现带搜索的下拉框
2022/03/25 Javascript
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers