AngularJS Tutorial(11)from w3school



AngularJS has its own HTML events directives.


The ng-click Directive

The ng-click directive defines an AngularJS click event.

AngularJS Example

< div ng-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

< div 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.


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

< div 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 »
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值