The Knowledge Foundation

Tuesday, 24 April 2018

012 AngularJS DOM

DOM stands for Document Object Model . AngularJS directives used to bind application data to with of HTML DOM elements.

ng-disabled : Disable a HTML control .The control is bind with a model.Depending of the model value , control become enable and disabled. ng-disabled work with Boolean value (true /false).

<input type="text" ng-disabled="myAdult" "/>

ng-show : Show a HTML control .The control is bind with a model . Depending of the model value , control become visble. ng-show work with Boolean value (true /false).

<input type="text" ng-show="myAdult" "/>

ng-hide : Hide a HTML control .The control is bind with a model . Depending of the model value , control become hide. ng-hide work with Boolean value (true /false).

<input type="text" ng-hide="myAdult" "/>

ng-click : Handle click event of a control.

<input type="text" ng-click="Reset()" "/>

Live Example
(Enter value ,then Submit Form)

Health Checkup Application Form

Name :
Age :
Are you Adult ?
Parent Name :
Parent Contact Number :

{{data1}} {{data2}} {{data3}}

Live Example Code

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller('myController', function ($scope)

{

$scope.myInitial = false;

$scope.myInitialRev = false;

$scope.data1 = '';

$scope.data2 = '';

$scope.data3 = '';

$scope.show = false;

$scope.hide = true;

$scope.Save = function ()

{

$scope.myInitial = true;

$scope.myAdult = true;

$scope.myData = true;

$scope.myInitialRev = false;

$scope.show = true;

$scope.hide = false;

$scope.data1 = "Well Come " + $scope.myName + ". Your Age is :" + $scope.myAge;

if ($scope.myAdult == true)

$scope.data2 = "Your Parent Name : " + $scope.myParentName + ". Your Parent Contact is :" + $scope.myParentContactNumber;

$scope.data3 = "Your Application Received";

};

$scope.Reset = function ()

{

$scope.myInitial = false;

$scope.myAdult = false;

$scope.myData = false;

$scope.myInitialRev = true;

$scope.show = false;

$scope.hide = true;

};

});

</script>

<legend style=" font-weight:bold; color :Blue;" >Health Checkup Application Form</legend>

<table>

<tr>

<td>

Name :

</td>

<td>

</td>

</tr>

<tr>

<td>

Age :

</td>

<td>

</td>

</tr>

<tr>

<td>

Are you Adult ?

</td>

<td>

</td>

</tr>

<tr>

<td>

Parent Name :

</td>

<td>

</td>

</tr>

<tr>

<td>

Parent Contact Number :

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</fieldset>

</div>

Monday, 23 April 2018

011 AngularJS Scope

AngularJS Scope
AngularJS Scope object to pass data between view and controller.Scope is responsible for binding data and view.Scope contain property and method which are controller specific.Controller access model data via Scope object.

Following is a example of AngularJS Scope

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller('myController', function ($scope)

{

$scope.Pass = function ()

{

return $scope.msg = "Congratulation !!! You have pass the examination";

};

$scope.Fail = function ()

{

return $scope.msg = "Not Worry !! Try next time.";

};

});

</script>

Your Result {{msg}}

</div>

Output :

Explanation of the above examples

$scope is mandatory to pass as first argument to controller during its constructor definition.

$scope.Pass and $scope.Fail are method used in the HTML page.

Scope Inheritance
Controllers can be nested.Scope are controllers specific.A child controller can inherit scope of its parent controller.Below is the example of Scope Inheritance.

<!DOCTYPE >

<head>

</head>

var app = angular.module("myApp", []);

app.controller('ParentController', function ($scope)

{

$scope.msg1 = "Hi, I am Learing AngulasJS";

$scope.msg2 = "This is Parent Controller";

});

app.controller('ChildController', function ($scope)

{

$scope.msg2 = $scope.msg2 + " ,Hope , you will enjoy";

$scope.msg3 = "This is Child Controller";

});

</script>

Parent Controller ,Message 1 : {{msg1}} <br />

Parent Controller ,Message 2 : {{msg2}}

<br />

Child Controller ,Message 2 : {{msg2}} <br />Child Controller ,Message 3 : {{msg3}}

</div>

Output :

The above example have two contrller , ParentController and ChildController.Childcontroller is nested under the ParentController.Both the controller uses $scope as parameter.
Both controller modify $scope.msg2 . You will notice , Childcontroller has modified ParentController $scope.msg2.

Root Scope

The Knowledge Foundation

Tuesday, 24 April 2018

012 AngularJS DOM

Monday, 23 April 2018

011 AngularJS Scope

বাঙালির বেড়ানো সেরা চারটি ঠিকানা

Labels

Report Abuse