问题描述：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遇到的一个问题的更多相关文章

  1. Angular: 执行ng lint后如何快速修改错误

    当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...

  2. Angular CLI 创建你的第一个 Angular 示例程序

    第一步:安装 Angular CLI 你要使用 Angular CLI 来创建项目.创建应用和库代码,并执行多种开发任务,比如测试.打包和发布. 全局安装 Angular CLI. 要想使用 npm  ...

  3. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  4. Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  5. Angular实战之使用NG-ZORRO创建一个企业级中后台框架

    前言: 在之前的一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细的介绍了Angular开发环境的搭建和项目的创建.这篇文章就是为了让大家熟悉了解我们该如何在Angular ...

  6. Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）

    前言: 上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板.这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成 ...

  7. angular.js的ng-app 指令定义一个 AngularJS 应用程序。

    <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...

  8. angular自定义指令 repeat 循环结束事件；limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

  9. angular 的 @Input、@Output 的一个用法

    angular 使用 @input.@Output 来进行父子组件之间数据的传递. 如下: 父元素: <child-root parent_value="this is parent ...

  10. ANGULAR 使用 ng build --prod 编译报内存错误的解决办法

    如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...

随机推荐

  1. static用法详解

    一. 面向过程程序设计 1.静态全局变量 在全局变量前,加上关键字static,该变量就被定义成为一个静态全局变量.我们先举一个静态全局变量的例子,如下: //Example 1 #include & ...

  2. 利用文件实现Free Pascal中的简单排序功能

    此程序主要是验证文件功能的读写功能,总结到的东西有:①文件无论是读还是写,都要先建立链接关系才可以进行;②读与写不能同时进行,必须分开操作,这也可以理解,在实际鼠标操作时也是如此的!③读写后必须用cl ...

  3. POJ 1655-Balancing Act（树形dp）

    题意: 求n个节点的树中哪个节点删除以后得到的最大连通分量最小. 分析:同上题 #include <map> #include <set> #include <list& ...

  4. lightoj 1016

    水题,排个序直接搞. #include<cstdio> #include<string> #include<cstring> #include<iostrea ...

  5. uva 11107 Life Forms

    题意:给你N个串,求一个串在大于等于N/2的模板串中连续出现.如果有多解按字典序最小输出. 白书模板题.二分答案+合并模板串成一个新串,扫秒新串的height数组. 考查后缀数组+LCP #inclu ...

  6. codeforce--600D - Area of Two Circles' Intersection

    题意:求相交圆的面积.借鉴大神代码,精度超高. #include <fstream> #include <iostream> #include <string> # ...

  7. 关于SQL语言，查询关联多张表出现的，无法返回空值的问题。

    用外连接: SELECT * from PERempms left outer join PERPROMSon PERPROMS.BRANCH =PERempms.BRANCH left outer ...

  8. pip 安装python环境及打包

    0.安装虚拟环境 pip install virtualenv   virtualenv env1   source env1/bin/activate   1. 将包依赖信息保存在requireme ...

  9. 【解决】国内访问github过慢

    github在国内慢的有点不能忍了,受不了了google了一下有什么方法没,还真找到一些方法. 死马当活马医,操作完之后确实速度上快了一些,但是毕竟国情所限,仍然做不到“秒开”. 主要是参考两篇博客: ...

  10. [Tutorial] Using the RasPi as a WiFi hostspot

    http://www.raspberrypi.org/forums/viewtopic.php?f=36&t=19120 http://wireless.kernel.org/en/users ...