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 相关文章推荐
js 设置缓存及获取设置的缓存
May 08 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
Vuex 进阶之模块化组织详解
Jan 12 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
axios如何取消重复无用的请求详解
Dec 15 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
php函数的常用方法及注意之处小结
2011/07/10 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
浅析php单例模式
2014/11/25 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
关于python中的xpath解析定位
2020/03/06 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
什么是属性访问器
2015/10/26 面试题
教师节商场活动方案
2014/02/13 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
薪资证明范本
2015/06/19 职场文书
上班旷工检讨书
2015/08/15 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
从原生JavaScript到React深入理解
2022/07/23 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript