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下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
js创建对象的方法汇总
Jan 07 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 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
安装APACHE
2007/01/15 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
php curl发送请求实例方法
2019/08/01 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
小学生倡议书范文
2014/05/13 职场文书
还款承诺书范文
2014/05/20 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python