Angular Js – Part four

The ng-disabled Directive

The ng-disabled directive binds application data directly to the HTML disabled attribute.

<div ng-app=“”>

<p>
<button ng-disabled=“mySwitch”>Click Me!</button>
</p>

<p>
<input type=“checkbox” ng-model=“mySwitch”>Button
</p>

</div>

The ng-disabled directive binds the application data “mySwitch” to the HTML disabled attribute.

The ng-model directive binds “mySwitch” to the content (value) of the HTML input checkbox element.

Eg:http://www.w3schools.com/angular/tryit.asp?filename=try_ng_html_disabled

The ng-show Directive

The ng-show directive hides or shows an HTML element.

<div ng-app=“”>

<p ng-show=“true”>I am visible.</p>

<p ng-show=“false”>I am not visible.</p>

</div>

Eg:http://www.w3schools.com/angular/tryit.asp?filename=try_ng_html_show

The ng-click Directive

The ng-click directive defines an AngularJS click event.

<div ng-app=”” ng-controller=”myController”>

<button ng-click=”count = count + 1″>Click Me!</button>

<p>{{ count }}</p>

</div>
<script>
function myController($scope) {
$scope.count = 0;
}
</script>

Eg:http://www.w3schools.com/angular/tryit.asp?filename=try_ng_events_click

Hiding HTML Elements

The ng-show directive defines the visibility of an application.

The value ng-show=”true” (boolean value) makes the element visible

The value ng-show=”false” makes the element unvisible.

<div ng-app=”” ng-controller=”personController”>

<button ng-click=”toggle()”>Hide user</button>

<p ng-show=”myVar”>
First Name: <input type=text ng-model=”person.firstName”><br>
Last Name: <input type=text ng-model=”person.lastName”><br><br>
Full Name: {{person.firstName + ” ” + person.lastName}}
</p>

</div>

<script>
function personController($scope) {
$scope.person = {
firstName: “John”,
lastName: “Doe”
};
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>

Eg: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_events

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s