Angular JS入门
☀️将流式结构--->模块化
一、事件监听
1.事件监听
前言
NG框架中通过对元素标签添加[ng-事件名] 指令，来对元素添加事件监听
而事件监听的回调函数需要在controller中通过$scope来实现说明:整个过程类似html事件
- 语法:
<E ng-事件名称='回调函数名(NG变量)'></E>
$scope.回调函数名 = function (形参){
- 在函数中形参就是传入的NG变量的值
ng-click、ng-model
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="app" ng-controller="mainController">
<head>
<meta charset="utf-8" />
<title ng-bind="title"></title>
</head>
<body>
<p ng-show="showFlag">{{content}}</p>
<button ng-click="eventHandler()">Click Here!!!</button>
<ul>
<li ng-repeat="movie in movies track by $index" ng-click="clickInLi($index)">{{movie}}</li>
</ul>
<!--angularjs-->
<script src="js/angular-1.5.5/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('mainController', ['$scope', function ($scope) {
$scope.title = "event listen";
$scope.content = "TEST";
$scope.showFlag = true;
$scope.eventHandler = function () {
console.log('this is a test in click...');
$scope.showFlag = !$scope.showFlag;
};
$scope.movies = ['fight club(1999)', 'Seven(1995)', 'Inglourious Basterds(2009)'];
$scope.clickInLi = function (index) {
console.log('you cick item ' + index + ' ,the movie is ' + $scope.movies[index]);
}
}]);
/*
1.事件监听
描述：
NG框架中通过对元素标签添加【ng-事件名】指令，来对元素添加事件监听
而事件监听的函数需要在controller中，通过$scope来实现
说明：
整个过程类似于html事件
语法：
<E ng-事件名称='回调函数名(NG变量)'></E>
...
$scope.回调函数名=function(形参){
//在函数中形参就是传入的NG变量的值
}
*/
</script>
</body>
</html>