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继承 Base类的源码解析
Dec 30 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
浅谈vue中组件绑定事件时是否加.native
Nov 09 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php全角字符转换为半角函数
2014/02/07 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
微信小程序实现星级评价效果
2018/12/28 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
python实现石头剪刀布小游戏
2021/01/20 Python
将python图片转为二进制文本的实例
2019/01/24 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
校庆筹备方案
2014/03/30 职场文书
住房抵押登记委托书
2014/09/27 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2014年度个人总结范文
2015/03/09 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
法定授权委托证明书
2015/06/18 职场文书
执行力心得体会范文
2016/01/11 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL