[Angularjs] Angularjs ng-style, ngStyle, angurlajs css 적용

Angularjs의 ng-style, ngStyle, angurlajs css 적용에 대해서 알아보겠습니다.

ng-style, ngStyle를 이용하여 angularjs에서 css를 적용할 수 있습니다.

- html 

<div ng-app="app" ng-controller="controller">
   <div>
     <span ng-style="Style">text color</span>
    <button ng-click="setColorRed()">color Red</button>
   </div> 
   <div>
     <span ng-style="background">text color</span>
     <button ng-click="setBackgroundRed()">background Red</button>
   </div>
</div>

- javascript

var app = angular.module("app", []);
  app.controller("controller", function ($scope) {

    $scope.setColorRed = function () {
      $scope.Style = {
        'color' : 'red'
      };
    }
    
    $scope.setBackgroundRed = function () {
      $scope.background = {
        'background-color' : 'red'
      };
    }
});

ng-style에 Style과 background 객체를 바인딩하여 버튼 클릭이 됐을 때 style을 적용합니다.

기존 css와 다른점은 ng-style로 css를 적용할 때 JSON 형태로 {"속성":"값"} 적용한다는 점 유의해 주시기 바랍니다.

예제보기