使用angular的ng-repeat遇到的一个问题
问题描述：ng-repeat绑定的数据集动态更新之后其包裹的子元素所绑定的事件全部丢失；
问题详述：
问题代码如下：
<style>
img{width:100px;height:100px;}
.foo{width:50px;height:50px;border:1px solid #ccc;}
</style><html>
<div ng-app="my" ng-controller="test">
<button ng-click="change()">Change</button>
<div ng-repeat="address in addresses">
<div class="foo">{{address}}</div>
</div>
</div></html>
<script>
angular.module('my',[]).controller('test',function($scope){
$scope.sites=[['A1','A2'],['B1','B2']];
$scope.addresses=$scope.sites[0];
$scope.change=function(){$scope.addresses=$scope.sites[1];};
});
$(function(){
$(".foo").click(function(){alert(1)});
});
</script>
页面加载完毕后给foo类元素绑定的事件都正常工作，点击Change按钮改变数据集addresses，原先给foo类元素绑定的点击事件全部丢失；
解决方案：
目前并没有找出治本的方法，一种比较low的折衷方案就是使用中间量，修改后的代码如下：
<style>
img{width:100px;height:100px;}
.foo{width:50px;height:50px;border:1px solid #ccc;}
</style>
<html>
<div ng-app="my" ng-controller="test">
<button ng-click="change()">Change</button>
<div ng-repeat="i in nums">
<div class="foo">{{addresses[i]}}</div>
</div>
</div>
</html>
<script>
angular.module('my',[]).controller('test',function($scope){
$scope.sites=[['A1','A2'],['B1','B2']];
$scope.addresses=$scope.sites[0];
$scope.change=function(){$scope.addresses=$scope.sites[1];};
$scope.nums=[];
for(var i=0;i<$scope.addresses.length;++i){$scope.nums.push(i);}
});
$(function(){
$(".foo").click(function(){alert(1)});
});
</script>
其实就是避免了ng-repeat中的数据集发生变化，如果有更好的解决方案请多多指教。
使用angular的ng-repeat遇到的一个问题的更多相关文章
- Angular: 执行ng lint后如何快速修改错误
当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...
- Angular CLI 创建你的第一个 Angular 示例程序
第一步:安装 Angular CLI 你要使用 Angular CLI 来创建项目.创建应用和库代码,并执行多种开发任务,比如测试.打包和发布. 全局安装 Angular CLI. 要想使用 npm ...
- Angular CLI ng常用指令整理
一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...
- Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
- Angular实战之使用NG-ZORRO创建一个企业级中后台框架
前言: 在之前的一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细的介绍了Angular开发环境的搭建和项目的创建.这篇文章就是为了让大家熟悉了解我们该如何在Angular ...
- Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）
前言: 上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板.这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成 ...
- angular.js的ng-app 指令定义一个 AngularJS 应用程序。
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...
- angular自定义指令 repeat 循环结束事件；limitTo限制循环长度、限定开始位置
1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...
- angular 的 @Input、@Output 的一个用法
angular 使用 @input.@Output 来进行父子组件之间数据的传递. 如下: 父元素: <child-root parent_value="this is parent ...
- ANGULAR 使用 ng build --prod 编译报内存错误的解决办法
如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...
随机推荐
- POJ 3140-Contestants Division（树形dp）
题意: n给节点的树,分成两个联通分支,使它们大小的绝对值最小,求这个最小值. 分析: 分成两个联通分支,即删除一条边,开始看到m(边数)和n(点数)没什么关系,但题目说的是一棵树,则m==n-1,求 ...
- 【打包成exe安装包文件发布你的程序】使用QT联系人管理系统的例子
[前言]在 QT数据库使用案列[联系人]-- 使用sqlite和QStringListModel 中,我们写了这个程序,如何将它打包成安装文件发给其他小伙伴呢? 我们使用 nsis-2.46-setu ...
- VBScript Sample:遍历文件夹并获取XML文件中指定内容
案例: 我有一个文件夹,里面有很多子文件夹,每个子文件夹中都存在一个相同名字的XML文件,XML文件里面的标签结构相同,只是内容不同,XML文件中包含ID,Name等标签. 文件夹及文件结构如下图: ...
- SQL日志文件的作用
服务器意外关闭造成的损失.服务器意外关闭造成的损失.解决数据一致性问题.数据库时点恢复的问题,这四个常见的问题,SQL Server数据库管理员,可以通过了解数据日志文件,轻松排除故障. 当系统出现故 ...
- 各类JavaScript插件
ZeroClipboard复制内容到剪切板(支持IE.FF.Chrome) ZeroClipboard.js ZeroClipboard.swf hotkeys键盘监听 jquery.hotkeys. ...
- ThinkPHP中SQL调试方法
$admin = D('Admin'); $info = $admin->field('`lastlogintime`,`lastloginip`')->where(array('user ...
- Android实例-消息框(XE8+小米2)
方法一支持. 方法二与方法三都是三方单元,功能相同. 方法4与方法5报错,提示平台不支持. 第三方单元一: unit Android.JNI.Toast; // Java bridge class i ...
- STM32 SysTick定时器应用【worldsing笔记】
SysTick是CM内核独立的定时器,时钟可以用内核内部的,也可以用芯片厂家(ST)的时钟,参考<Cortex-M3权威指南>的第13章: 另外也可以考<STM32F10xxx Co ...
- FreeModbus Slave 改进的eMbPoll()【worldsing 笔记】
eMbPoll()的作用是FreeMod协议通信过程中不断查询事件对列有无完速数据桢,并进行地址和CRD验证,最后运行和回复主机. 为了减小代码尺寸对eMbPoll进行改进: 原版: 1: 2: e ...
- BNUOJ 26579 Andrew the Ant
LINK:Andrew the Ant 题意:给一根长度为L的木头,上面有A只蚂蚁[每只蚂蚁给出了初始行走的方向,向左或向右].当两只蚂蚁相碰时,两只蚂蚁就朝相反的方向行走~╮(╯▽╰)╭问的是:最后 ...