AngularJS Tutorial(11)from w3school
2015-08-04 09:26
671 查看
AngularJS has its own HTML events directives.
ng-app=""
ng-controller="myCtrl">
<button
ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
Try it Yourself »
The value ng-hide="true" makes an HTML element invisible.
The value ng-hide="false" makes the element visible.
ng-app="myApp"
ng-controller="personCtrl">
<button
ng-click="toggle()">Toggle</button>
<p
ng-hide="myVar">
First Name: <input
type="text" ng-model="firstName"><br>
Last Name: <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>
Try it Yourself »
Application explained:
The first part of the personController is the same as in the chapter about controllers.
The application has a default property (a variable): $scope.myVar = false;
The ng-hide directive sets the visibility, of a <p> element with two input fields, according to the value (true or false) of
myVar.
The function toggle() toggles myVar between true and false.
The value ng-hide="true" makes the element invisible.
The value ng-show="false" makes an HTML element invisible.
The value ng-show="true" makes the element visible.
Here is the same example as above, using ng-show instead of ng-hide:
ng-app="myApp"
ng-controller="personCtrl">
<button
ng-click="toggle()">Toggle</button>
<p
ng-show="myVar">
First Name: <input
type="text" ng-model="firstName"><br>
Last Name: <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 = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
Try it Yourself »
AngularJS has its own HTML events directives.
The ng-click Directive
The ng-click directive defines an AngularJS click event.AngularJS Example
<divng-app=""
ng-controller="myCtrl">
<button
ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
Try it Yourself »
Hiding HTML Elements
The ng-hide directive can be used to set the visibility of a part of an application.The value ng-hide="true" makes an HTML element invisible.
The value ng-hide="false" makes the element visible.
AngularJS Example
<divng-app="myApp"
ng-controller="personCtrl">
<button
ng-click="toggle()">Toggle</button>
<p
ng-hide="myVar">
First Name: <input
type="text" ng-model="firstName"><br>
Last Name: <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>
Try it Yourself »
Application explained:
The first part of the personController is the same as in the chapter about controllers.
The application has a default property (a variable): $scope.myVar = false;
The ng-hide directive sets the visibility, of a <p> element with two input fields, according to the value (true or false) of
myVar.
The function toggle() toggles myVar between true and false.
The value ng-hide="true" makes the element invisible.
Showing HTML Elements
The ng-show directive can also be used to set the visibility of a part of an application.The value ng-show="false" makes an HTML element invisible.
The value ng-show="true" makes the element visible.
Here is the same example as above, using ng-show instead of ng-hide:
AngularJS Example
<divng-app="myApp"
ng-controller="personCtrl">
<button
ng-click="toggle()">Toggle</button>
<p
ng-show="myVar">
First Name: <input
type="text" ng-model="firstName"><br>
Last Name: <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 = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
Try it Yourself »
相关文章推荐
- AngularJS Tutorial(10)from w3school
- AngularJS Tutorial(9)from w3school
- AngularJS Tutorial(8)from w3school
- AngularJS Tutorial(7)from w3school
- AngularJS Tutorial(6)from w3school
- AngularJS Tutorial(5)from w3school
- AngularJS Tutorial(4)from w3school
- AngularJS Tutorial(3)from w3school
- AngularJS Tutorial(2)from w3school
- AngularJS Tutorial(1)from w3school
- angularjs入门案例 新玩具-中午吃神马
- angular之Directive - Compile vs. Link
- angularjs calling order
- AngularJs学习笔记--Creating Services
- angular之directive定义对象说明
- Angularjs中的标签模式和html5模式
- 《AngularJS》5个实例详解Directive(指令)机制
- angularjs思维
- angular要点总结
- AngularJs学习笔记__2、输出Hello World