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 写的简单进度条控件
Jan 22 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 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小程序自动提交到自助友情连接
2009/11/24 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
python访问sqlserver示例
2014/02/10 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
python中的句柄操作的方法示例
2019/06/20 Python
python aiohttp的使用详解
2019/06/20 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Python pymsql模块的使用
2020/09/07 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
自我推荐信范文
2014/05/09 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
离婚财产处理协议书
2014/09/30 职场文书
论文致谢词范文
2015/05/14 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers