The following directives are used to bind application data to attributes of HTML DOM elements:
1.ng-disabled Directive:-
This directive is used to disable any attribute (button,checkbox,etc).
Add ng-disabled attribute to a HTML button and pass it a model. Then change the model value in the controller and see the variation.
<button class="btn btn-default fullwidth fullwidth_blue prev" id="prevBtn" ng-disabled='prevDisabled' ng-click="prevBtn()" ng-model="prevDisabled">Prev</button>
2. ng-show Directive:-
This directive is used to display an attribute based on conditions.
Add ng-show attribute to an HTML element and pass it a model. Then change the model value in the controller and see the variation.
<div class="no_msg" ng-show="noMessageDiv">
No shouts available.
</div>
3.ng-hide Directive:-
This directive is used to hide an attribute based on conditions.
Add ng-hide attribute to an HTML element and pass it a model. Then change the model value in the controller and see the variation.
<input type="checkbox"
ng-model="showHide2">Hide Button<button ng-hide="showHide2">Click Me!</button>
4. ng-click Directive:-
This directive is used to call a function as soon as a click event occurs while an attribute is clicked.
Add ng-click attribute to an HTML button and update a model. Bind the model to HTML and see the variation.
<button type="button" class="btn btn-default fullwidth fullwidth_blue" style="width: 100%;
margin-left: 0px;margin-top: 10px;"ng-click="createPhoto()">Create new photo</button>
For example:-
<html>
<head>
</head>
<body>
<div ng-app="">
<div class="col-xs-6 prev-arrow">
<button class="btn btn-default fullwidth fullwidth_blue prev" id="prevBtn" ng-disabled='prevDisabled' ng-click="prevBtn()" ng-model="prevDisabled">
<span id="arrow"></span>
Prev
</button>
</div>
<div class="no_msg" ng-show="noMessageDiv">
No shouts available.
</div>
<div class="no_msg" ng-hide="noMessageDiv1">
shouts available.
</div>
<div class=" col-sm-12">
<button type="button" class="btn btn-default fullwidth fullwidth_blue" style="width: 100%;
margin-left: 0px;margin-top: 10px;"ng-click="createPhoto()">Create new photo</button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
</body>
</html>
Now in controller you need to work with the model values.
var myApp = angular.module('myApp', []);
myApp.controller( "myController", function($scope) {
var flag = 1;
$scope.prevDisabled = false;
$scope.noMessageDiv = false;
$scope.noMessageDiv1 = false;
if(flag==1)
$scope.prevDisabled = true;
$scope.noMessageDiv1 = true;
flag = 2;
$scope.createPhoto = function(){
$scope.noMessageDiv = true;
};
})
In the above code, if the flag value is equal to 1, then the disabled button will be disabled and the noMessageDiv1 will not be displayed as those model values are 'true'. When the button is clicked,createPhoto function is called that sets the noMessageDiv to true which will display that div showing the message.
This code is simply to show you the usage of these directives.
0 Comment(s)