ng-style

What is ng-style:ng-style used to add css dynamically..
Description of ng-style:ng-style has 0 priority . With the help of ng-style we can add css in a HTML element..
Syntax of ng-style:
<elementname  ng-style="myexpression"></elementname>
    OR

    <label ng-style="myexpression"></label >
How to Use ng-style/ng-style Example::
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-style
            <br />
            <div ng-init="myexpression='backgroud-color:yellow;'">
                Without style  : <div >Hey ng-style</div>
               
                with style  :<div ng-style="myexpression">Hey ng-style</div>
            </div>
        </div>
    </div>
</div>
  o/p: without style  :  Hey ng-style
        with style  :     Hey ng-style
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-style
            <br />
            <div ng-init="myexpression='backgroud-color:red;'">
                Without style  : <div>Hey ng-style</div>
                <button ng-click="myfun()">change background</button>
                with style  :<div ng-style="myexpression">Hey ng-                       style</div>
            </div>
        </div>
    </div>
</div>
  o/p:  without style  :  Hey ng-style
        with style  : Hey ng-style
<script>
    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
        $scope.myfun = function () {
            $scoep.myexpression = 'backgroud-color:yellow;';
        }
    });
</script>

o/p:   without style  :  Hey ng-style


         with style  : Hey ng-style

No comments :

Post a comment