angular js - function多次触发，在ng-repeat中检查ng

在AngularJS中，如果你想在ng-repeat中检查一个函数是否被多次触发，你可以使用$watch来监听这个函数的变化。这是一个示例：

首先，在你的控制器中定义一个函数，该函数将被ng-repeat中的每个元素触发：

$scope.triggerFunction = function(item) {
  // 你的逻辑代码
};

然后，在控制器中使用$watch来监听这个函数的变化：

$scope.$watch('triggerFunction', function(newValue, oldValue) {
  if (newValue !== oldValue) {
    // 函数被触发
    console.log('Function has been triggered');
  }
}, true);

在ng-repeat中使用这个函数：

<div ng-repeat="item in items" ng-click="triggerFunction(item)">
  {{ item }}
</div>

这样，每当triggerFunction被触发时，$watch都会检测到变化并输出“Function has been triggered”。

相关·内容

AngularJS一些简单处理得到性能提升

脏数据检查 != 轮询检查更新谈起angular的脏检查机制(dirty-checking), 常见的误解就是认为： ng是定时轮询去检查model是否变更。...其实，ng只有在指定事件触发后，才进入$digest cycle： DOM事件，譬如用户输入文本，点击按钮等。...优化ng-repeat 限制列表个数列表对象的数据转换，在放入scope之前处理。...digest过程中，filter会执行很多次，至少两次。...input); return input + input; }; }); 可以在controller中预先处理 //mainCtrl.js angular.module('filtersPerf

1.7K2 0

AngularJS系列之常用指令

/1.4.6/angular.min.js"> 在输入框中尝试输入...> 从例子可以看出，先是在div中添加ng-app属性，表示这个div是AngularJS应用程序的所有者，这样接下来才可以继续使用其他的一些指令。...还有一个比较重要的指令就是：ng-repeat 这个指令最大的作用就是循环输出HTML元素，类似于js中的each功能。下面给出一个例子来介绍这个指令的具体用法：从上面这个例子就可以明显的看出，通过ng-repeat这个指令，实现了ul中li的遍历输出。...用法就是上面的“x in names”通过这个代码就可以实现类似于js中的in方法，把names中的值一个个取出来并放到x这个变量中，最后放到{{x}}中展示在HTML中去。

2.1K6 0

基于AngularJS的过滤与排序

本程序中可以了解到：　　1 angularjs的过滤器　　2 ng-repeat的使用方法　　3 控制器的使用　　4 数据的绑定　　程序设计分析　　首先，如果要是先查询过滤，就要使用到...AngularJS中的过滤器filter 了。　　...并且减少了大量不必要的监听器啊触发器啊之类的代码的编写，真正实现了类似spring的效果~ 　　数据的展现，可以通过ng-repeat实现。...当网页解析到ng-repeat的时候，会为每一个数组中的元素都克隆一份标签，进行编译解析。　　　　　　　...=utf-8" /> </script

2.3K6 0

前端框架AngularJS入门

-1 {{100+100}} 执行结果如下...ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。...src="angular.min.js"> 请输入你的姓名：<input ng-model...ng-click 是最常用的单击事件指令，再点击时触发控制器的某个方法 3.6 循环数组入门小Demo-6 循环数据 <script...注意：以下代码需要在tomcat中运行。

2.4K3 0

AngularJS 1 教程

---- JS Bin on jsbin.com 同样的一个简单需求，可以明显看得出jQuery中业务代码，直接操作DOM代码揉杂在一块，而Angular中JS代码关心业务逻辑，HTML描述界面非常的清晰...说明：脏检查需要一个契机触发，这也是AngualrJs 1中提供大量自己包装过的js原生就有的方法，典型的如 timeout ， http都是为了能够出发脏检查的一次脏检查会便利App中所有的需要被观察的对象...1000毫秒setTimeout的能够更新是因为，这个时间点，恰好由timeout方法触发了一次检查。因此这也就导致了从另一个角度分析脏检查。...从性能角度来说脏检查上面例子说明了AngularJS脏检查的特性，手动触发，全局检查。每次循环都要全部遍历一边$$watchers的值，而且如果被检测的值相互有依赖，还要循环多次。...AngularJs中本身以及内置了大量的指令，例如， ng-if ， ng-repeat ，甚至ng-controller。也可以通过下面方式来自定义指令。

4.6K3 0

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

假设你在一个ng-click指令对应的handler函数中更改了scope中的一条数据，此时AngularJS会自动地通过调用$digest()来触发一轮$digest循环。...脏检查如何被触发？ angular 会在可能触发 UI 变更的时候进行脏检查：这句话并不准确。...触发几次？首先：ng-click="" 什么都没有做。angular 会因为这个事件回调函数什么都没做就不进行脏检查吗？不会。然后：#span1 被隐藏掉了，会检查绑定在它上面的表达式吗？...ng-click中写的表达式，能使用JS原生对象上的方法，比如Math.max之类的吗？为什么？不可以。...只要是在页面中，就不能直接调用原生的 JS 方法，因为这些并不存在于与页面对应的 Controller 的 $scope 中。

7.8K4 0

前端框架：第一章：AngularJS

>入门小Demo-1{{100+100}}请输入你的姓名：运算结果：{{z}} 运行结果： ng-click 是最常用的单击事件指令，在点击时触发控制器的某个方法...>{{x}} 这里的ng-repeat指令用于循环数组变量。...注意：以下代码需要在tomcat中运行。

7.3K1 0

AngularJS入门 & 分页 & CRUD示例

用法简介 1.引入文件 2.使用标签 2.1 ng-app: （定义AngularJS...{{ }}：双括号，是 angularJS 插值表达式，利用括号获取值，同时也可以在花括号中编写表达式。... {{name}} 2.4 模块化设计使用模块化的开发方式管理js: var app = angular.module...2.5 ng-controller: (指定控制器) $scope 的贯穿整个AngularJS App应用，所有变量，函数，对象全都绑定在$scope对象中，它在视图和控制器间建立一个通道，基于作用域视图在修改数据时会立刻更新..."> {{arr}} 2.7 ng-repeat: (循环对象数组) var app = angular.module("dintalk

3.3K4 0

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

如果watch修改了模型中的值，将会触发一次 Creation / 创建根作用域在应用启动的时候由$injector创建，在template linking阶段和指令时将会创建新的子作用域； Watcher...监听指令，像是ng-click，注册一个监听器在dom上。当dom的监听器触发后，这个指令将执行相关的表达式并且更新视图使用$apply方法。...指令和创建作用域在大多数情况，指令和作用域交互不创建新的作用域。无论如何，一些指令，像是ng-controller和ng-repeat，创建子作用域并且将子作用域赋予相对应的dom元素上。...查看ng-controller了解更多信息作用域$watch性能考虑作用域脏检查属性变动在angular中是一个常规的操作，所以脏检查函数需要尽可能的快。...angular离开这个执行上下文，并且结束keydown时间在js框架中的使用。浏览器重新渲染这个视图基于更新的文本。

13.2K2 0

（4）Angular的开发

angular框架，库，是一款非常优秀的前端高级JS框架，有了这个框架就可以轻松构建SPA应用程序，通过指令宽展了HTML，通过表达式绑定数据到HTML。...image.png AngularJS MVC 模块化自动化双向数据绑定指令系统下载 Angular.js 的包 https://github.com/angular/angular.js.../releases 使用 CDN 上的 Angular.js http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js 使用 Bower...image.png HTML 页面中 ng-xxx 的属性称之为指令 ng-app 指令告诉 AngularJS，元素是 AngularJS 应用程序管理的边界 ng-model 指令把文本框的值绑定到变量...-- 浏览器在解析HTML时会去请求{{item.url}}文件 --> <!

3.1K4 0

第215天：Angular---指令

-- ng-repeat 会遍历数组中每一个元素，分别创建li --> 12 7 8 9 10 29 30 9、ng-checked ng-checked 和 ng-selected 只会做数据到视图的同步.../angular/angular.js"> 31 32 33 10、其他常用指令 ng-model ng-class ng-show/ng-hide/...ng-if ng-click ng-link/ng-src 11、自定义指令 AngularJS中可以通过代码自定义指令： 1 myModule.directive('hello', function

3.2K3 0

【一起来烧脑】一步学会AngularJS系统

ng-app="" ng-init="firstName='John'"> 在输入框中输入：姓名：<input type="text" ng-model="firstName...根元素 ng-init 指令为 AngularJS 应用程序定义了初始值 ng-model 指令绑定 HTML 元素到应用程序数据 ng-repeat 指令对于集合中（数组中）的每个项会克隆一次... var app = angular.module('myApp', []); app.controller('myCtrl', function($scope...ul> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope,...需要引入angular-animate.min.js库依赖注入依赖注入简化了Angular解析模块/组件之间依赖的过程路由实现多视图的单页Web

5.6K2 0

【AngularJS】—— 13 服务Service

{{user.name}} {{user.name}} <script src="http://apps.bdimg.com/libs/<em>angular</em>.<em>js</em>/1.2.16/<em>angular</em>.min.<em>js</em>

1.4K5 0

【AngularJS】 # AngularJS入门

/angular.min.js"> <!...的情况 ng-pristine 控件为初始状态 3.6. ng-repeat指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。...Scope作用范围根作用域：$rootScope 作用在 ng-app 指令包含的所有HTML元素中用 $rootScope 定义的值，可以在各个controller中使用 <div ng-app=...外部文件中的控制器将标签中的代码复制到 **.js 的外部文件中 HTML中进行引入即可 </script

23.2K6 0

11-angular 实例学习-2

/1.6.8/angular.js'>script> var app = angular.module('myApp', []); app.controller.../angular.js/1.6.8/angular.js'>script> var app = angular.module('myApp', []); app.controller...="myApp" ng-controller="myCtrl"> 选择要取 focusbutton> div> script> //模型 var app = angular.module

2.2K4 0

AngularJS 表格

ng-repeat 指令可以完美的显示表格。 ---- 在表格中显示数据使用 angular 显示表格是非常简单的： AngularJS 实例 var app = angular.module('myApp', []); app.controller('customersCtrl', function... 中添加 $index: AngularJS 实例 {{ $index + 1 }} <td

1.8K1 0

angularjs

最近在开发过程中，发现一个问题，在使用angularjs的ng-repeat遍历过程中，如果遍历的数组中包含相同的项，则会抛错。如下例： var app = angular.module('myApp', []); app.run(function(...Repeater: item in ages, Duplicate key: number:25, Duplicate value: 25 解决方案：在对应的ng-repeat指令中增加...track by $index {{item}}

1.5K3 1

AngularJS系列之select下拉选择第一个选项为空白的解决办法

/1.4.6/angular.min.js"> 选择网站: 第一种办法就是在select的下面加上一个默认option，不过有一点必须特别注意，就是在option中的value值必须设置为“”（也就是空字符串），否则上面第一个选项还是会留空白出来.../1.4.6/angular.min.js"> 选择网站: 从例子中就可以看出，其实就是在value中添加自己想要的值信息，然后再控制器中进行传初始值。.../1.4.6/angular.min.js"> 选择网站:<

3.2K7 0

angularJS学习之路（六）---指令

ng-repeat 指令会重复一个 HTML 元素：使用 ng-repeat...ng-checked ng-readonly ng-selected ng-class ng-style ng-disabled: 下面代码中：input 如果没有输入，按钮是不能被点击的.../js/angular.min.js" > // JS for demo 2: angular.module('myApp', []) .run.../js/angular.min.js" > angular.module('myApp', []) .run(function($rootScope.../js/angular.min.js"> angular.module('myApp', []) .run(function($rootScope,

1.6K2 0

AngularJS：如何使用自定义指令来取代ng-repeat

对于处理小数量，ng-repeat是非常有用的，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。也别是数据大多都是静态的或已预存储好的，这个时候应避免使用ng-repeat指令。...ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数。用于监听模型变化，当你的模型部分发生变化时它会通知你。...在ng-repeat指令中，如果某行数据有15列数据都绑定了表达式，如果数据有1000多行的话，那么$watch就将近15000个，这性能简直难以想象。...所以当我们想要实现ng-repeat的功能又想兼备性能，那只能另找一种方法了。...//$elem.append(tableRow); }); } } }); 总结在本文中，主要模拟了ng-repeat的工作方式和逻辑，但只限于静态内容

2.5K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云