AngularJs 事件机制

Bertha 。 2021-07-24 20:10 398阅读 0赞

AngularJs事件机制
    	1、ng-无on的事件名='函数名(参数必须是NG变量)',对元素添加事件机制,回调函数需要在控制器脚本中实现
    	
    	2、控制器脚本中回调函数
    	$scope.回调函数名=function(形参){	...};

代码示例:

<html ng-app='app' ng-controller='main'>
    <head>
    	<meta charset="utf-8">
    	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
    	<title ng-bind='pageTitle'></title>
    	
    	<script src='js/underscore.js'></script>
    	<script src='js/angular.js'></script>
    	<style>
    
    	</style>
    </head>
    <body >
    
    	<p ng-show='showFlag'>{ { msg}}</p>
    	<button ng-click='clickHandler()'>测试按钮</button>
    	<ul>
    		<li ng-repeat='li_info in li_infos track by $index' ng-click='li_click($index)'>{ { li_info}}</li>
    	</ul>
    	<script>
    		var app=new angular.module('app',[]);
    		app.controller('main',['$scope',function($scope){ 
    			$scope.pageTitle='事件监听';
    			$scope.showFlag=true;//默认显示
    			$scope.msg='here is a text msg';
    
    			$scope.clickHandler=function()
    			{ 
    				console.log('测试内容');
    				$scope.showFlag=!$scope.showFlag;
    			}
    
    			$scope.li_infos=['猴赛雷1','猴赛雷2','猴赛雷3'];
    			$scope.li_click=function(index)
    			{ 
    				console.log('点击内容是:'+$scope.li_infos[index]);
    			}
    		}]);
    
    	</script>
    	
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，398人围观）

还没有评论，来说两句吧...

相关阅读

相关 AngularJs路由机制

概述最近项目要用到Angularjs路由机制，所以打算学一学，了解一下路由机制。在谈路由机制前有必要先提一下现在比较流行的单页面应用，就是所谓的single page

心已赠人/ 2022年08月20日 04:25/ 0 赞/ 218 阅读

相关 angularjs 事件广播（分发）与事件监听

使用angularjs，发现controller间的值传递，比较麻烦的，以后几篇文章会陆续说几种方法。一，angularjs `$broadcast $emit $on`

╰半夏微凉°/ 2022年07月21日 01:59/ 0 赞/ 131 阅读

相关 AngularJs --ng-click事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

女爷i/ 2022年07月13日 21:16/ 0 赞/ 151 阅读

相关 AngularJS系列(八)——事件

ng-click ：点击 ng-click 指令定义了 AngularJS 点击事件。 <div ng-app="myApp"ng-controller="my

柔光的暖阳◎/ 2022年06月08日 00:11/ 0 赞/ 176 阅读

相关 angularJs 点击事件

ng-click="lookDetail(\{ \{role.id\}\});" 点击事件会无效不用插值表达式，直接取 ng-click="lookDetail(rol

一时失言乱红尘/ 2022年05月13日 13:56/ 0 赞/ 221 阅读

相关 angularJs常用事件

ui-router禁用缓存 //配置路由 app.config(function ($stateProvider, $urlRouterProvider,

亦凉/ 2022年04月08日 09:08/ 0 赞/ 222 阅读

相关 angularJS(六)angularJsDemo之事件

需求：输入两个数通过点击事件来得出结果 ![20190405180719421.png][] ![20190405181019179.png][] 这里会用到cl

忘是亡心i/ 2022年02月23日 01:08/ 0 赞/ 205 阅读

相关 AngularJS 脏检查机制

　　脏检查是AngularJS的核心机制之一，它是实现双向绑定、MVVM模式的重要基础。一、digest循环　　AngularJS将双向绑定转换为一个堆watch表达式

本是古典何须时尚/ 2021年09月30日 01:32/ 0 赞/ 328 阅读

相关 AngularJS事件

一.事件 1.ng-click 指令允许当一个元素被点击后执行指定的表达式。 <input type="button" value="add-count" ng-cli

￡神魔★判官ぃ/ 2021年09月14日 06:58/ 0 赞/ 376 阅读

相关 AngularJs 事件机制

AngularJs事件机制 1、ng-无on的事件名='函数名(参数必须是NG变量)',对元素添加事件机制,回调函数需要在控制器脚本中实现

Bertha 。/ 2021年07月24日 20:10/ 0 赞/ 399 阅读