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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 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 Mysql编程之高级技巧
2008/08/27 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
python把一个字符串切开的实例方法
2020/09/27 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
班长演讲稿范文
2014/04/24 职场文书
付款委托书范本
2014/10/05 职场文书
刑事和解协议书范本
2014/11/19 职场文书
考试作弊检讨书
2015/01/27 职场文书
汽车转让协议书
2015/01/29 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python