Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to bind application data to attributes of HTML DOM elements?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 633
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: