AngularJS에서 ng-style사용시 함수 이용방법

mirinae.maru

■ ng-style 디렉티브를 사용할 경우에 동적으로 스타일을 줄 경우 함수(function)를 이용하는 방법을 정리하고자 한다. 여기서 사용하는 함수는 myStyle이고 인자를 서로 달리하여 호출한다. 중요한것은 함수가 CSS 스타일 리턴 값의 형태는 문자열(String)이 아니라 객체형(Object)이라야 한다는 것이다. 그리고 객체안에서 이름과 값은 전부 따옴표(“)로 감사야 한다.

■ myStyle함수 호출하고 스타일을 표현하는 객체 리턴

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', [])
        app.controller('myCtrl', function ($scope) {
        	
            $scope.myStyle = function (value) {

            	var color = "";
            	switch( value ) {
            		case 1 :  color = "red"; break;
            		case 2 :  color = "green"; break;
            		case 3 :  color = "blue"; break;	
            		default : color = "black"; break;
            	}

            	return {
            		"width" : value*100+"px",
            		"height" : value*100+"px",
            		"background-color" : color,
            		"margin" : "10px",
            		"float" : "left"
            	};
            }
        });
    </script>
    <div ng-app="myApp" ng-controller="myCtrl">
        
        <div ng-style="myStyle(1)">small</div>
        <div ng-style="myStyle(2)">medium</div>
        <div ng-style="myStyle(3)">large</div>
    </div>
</body>
</html>
ng-style function 실행 결과