AngularJS에서 ng-style사용시 조건문 이용방법

mirinae.maru

■ ng-click안에서 $scope변수를 변경하고 ng-style에서는 $scope변수를 비교하는 조건문이 들어가는 ng-style 디렉티브 예제이다. 아래 코드에서 ng-click에서는 colorVal 값을 1,2,3으로 변경한다. 그리고 각 ng-style에서는 colorVal값을 비교하여 버튼의 배경색상을 변경한다.

<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) {

    });
</script>
<div ng-app="myApp" ng-controller="myCtrl">
    
    <button type="button" 
           ng-click="colorVal=1" 
           ng-style="{'background-color':colorVal==1?'#ffd455':'#dddddd'}"
           style="width:100px;height:50px;font-size:smaller;">
           <span>AAA</span>
    </button>
    <button type="button" 
           ng-click="colorVal=2" 
           ng-style="{'background-color':colorVal==2?'#ffd455':'#dddddd'}"
           style="width:100px;height:50px;font-size:smaller;">
           <span>BBB</span>
    </button>
    <button type="button" 
           ng-click="colorVal=3" 
           ng-style="{'background-color':colorVal==3?'#ffd455':'#dddddd'}"
           style="width:100px;height:50px;font-size:smaller;">
           <span>CCC</span>
    </button>
</div>
</body>
</html>
AAA버튼클릭, colorVal=1
BBB버튼클릭, colorVal=2
CCC버튼클릭, colorVal=3