angular ng-repeat数组中的数组实例


Posted in Javascript onFebruary 18, 2017

//先定义一个数组

anular代码:

var app = angular.module('serApp', []); 

app.controller('indexCtrl', function($scope, $http) 
{ $scope.arrs = [{

<BR>







 n:'a'; 
        arr:['1','2','1'] 
      },{<BR><BR> 








 n:'b'; 
        arr:['4','5','6'] 
      }]; 
    })

html 代码:

<BR>

<div ng-controller="indexCtrl"><BR>      
<p>{{name}}</p><BR>      

<ul><BR>        
 <li ng-repeat="name in names">{{name.n}}<BR>          
 <p ng-repeat="a in name.arr track by $index" id="{{$index}}">{{a}}</p><BR>        
 </li><BR>      
</ul>
<BR>    
</div><BR><BR>

track by $index  在有重复值时需加上这段代码 不然浏览器会报这个错 Error: [ngRepeat:dupes]并且不会渲染到页面

以上这篇angular ng-repeat数组中的数组实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
js Canvas绘制圆形时钟效果
Feb 17 #Javascript
Bootstrap风格的zTree右键菜单
Feb 17 #Javascript
js仿新浪微博消息发布功能
Feb 17 #Javascript
babel基本使用详解
Feb 17 #Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 #Javascript
canvas 实现中国象棋
Feb 17 #Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 #Javascript
You might like
深入分析php之面向对象
2013/05/15 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
js实现微信聊天界面
2020/08/09 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
C#中的验证控件有几种
2014/03/08 面试题
linux面试题参考答案(2)
2015/12/06 面试题
小松树教学反思
2014/02/11 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫