AngularJS 事件
AngularJS 有自己的HTML 事件指令。
ng-click 指令
ng-click指令定義了AngularJS點擊事件。
AngularJS 實例
< div ng-app= "" ng-controller= "myCtrl" >
< button ng-click= "count = count + 1" >點我！ < /button >
< p > {{ count }} < /p >
< /div >
< button ng-click= "count = count + 1" >點我！ < /button >
< p > {{ count }} < /p >
< /div >
嘗試一下»
隱藏HTML 元素
ng-hide指令用於設置應用部分是否可見。
ng-hide="true"設置HTML元素不可見。
ng-hide="false"設置HTML元素可見。
AngularJS 實例
< div ng-app= "myApp" ng-controller= "personCtrl" >
< button ng-click= "toggle()" > >隱藏/顯示< /button >
< p ng-hide= "myVar" >
名: < input type= "text" ng-model= "firstName" > < br >
姓名: < input type= "text" ng-model= "lastName" > < br >
< br >
Full Name: {{firstName + " " + lastName}}
< /p >
< /div >
< script >
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
< /script >
< button ng-click= "toggle()" > >隱藏/顯示< /button >
< p ng-hide= "myVar" >
名: < input type= "text" ng-model= "firstName" > < br >
姓名: < input type= "text" ng-model= "lastName" > < br >
< br >
Full Name: {{firstName + " " + lastName}}
< /p >
< /div >
< script >
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
< /script >
嘗試一下»
應用解析:
第一部分personController與控制器章節類似。
應用有一個默認屬性: $scope.myVar = false;
ng-hide指令設置<p>元素及兩個輸入域是否可見，根據myVar的值(true或false)來設置是否可見。
toggle()函數用於切換myVar變量的值（true和false）。
ng-hide="true"讓元素不可見 。
顯示HTML 元素
ng-show指令可用於設置應用中的一部分是否可見 。
ng-show="false"可以設置HTML元素不可見 。
ng-show="true"可以以設置HTML元素可見。
以下實例使用了ng-show 指令:
AngularJS 實例
< div ng-app= "myApp" ng-controller= "personCtrl" >
< button ng-click= "toggle()" >隱藏/顯示< /button >
< p ng-show= "myVar" >
名: < input type= "text" ng-model= "firstName" > < br >
姓: < input type= "text" ng-model= "lastName" > < br >
< br >
姓名: {{firstName + " " + lastName}}
< /p >
< /div >
< script >
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
< /script >
< button ng-click= "toggle()" >隱藏/顯示< /button >
< p ng-show= "myVar" >
名: < input type= "text" ng-model= "firstName" > < br >
姓: < input type= "text" ng-model= "lastName" > < br >
< br >
姓名: {{firstName + " " + lastName}}
< /p >
< /div >
< script >
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
< /script >
嘗試一下»