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>
- javascriptvar 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 형태로 {"속성":"값"} 적용한다는 점 유의해 주시기 바랍니다.
예제보기
'AngularJS' 카테고리의 다른 글
| [Angularjs] angularjs click ngclick 버튼 클릭 (0) | 2015.12.23 |
|---|---|
| [Angularjs] filter, $filter, 필터링, 재정렬 (0) | 2015.12.22 |
| [Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문 (0) | 2015.12.15 |
| [Angularjs] angularjs controller 컨트롤러 (0) | 2015.12.14 |
| [Angularjs] angularjs $scope 스코프 (0) | 2015.12.14 |