javascript - スコープ変数に応じて CSS スタイルを適用する

Question

スコープ変数に応じて css プロパティを設定しようとしています。

基本的に、次のようなもの：

 <div ng-style="background: filters.area ? #f39c12 : #424242">

または多分それはもっと似ているはずです:

<div ng-style="filters.area ? 'background:#f39c12' : 'background:#424242'">

あるいは ：

<div ng-style="{{filters.area ? 'background:#424242' : 'background:#ff0000'}}">

しかし、上記のどれも機能しませんでした

Answer 1

ng-styleディレクティブ内の式に構文エラーがあります。こうやってみて、

HTML :

<div ng-controller="MainController">
    <div id="customControl" ng-style="filterarea ? {'background': '#f39c12'} : {'background':'#424242'}"></div>
</div>

JavaScript : (angularjs)

angular.module("myapp", []).controller("MainController", ["$scope", function($scope){
    $scope.filterarea = false;
}]);

CSS :

#customControl{
    width : 100px;
    height : 100px;
    background-color : yellow;
}

jsフィドル

Answer 2

Fiddle: http://jsfiddle.net/jpk547zp/3/

ng スタイル チェックの詳細については、https: //docs.angularjs.org/api/ng/directive/ngStyle

<div ng-app="approvalApp">
    <div ng-controller="SimpleApprovalController" >
        <div ng-style="filters.area ? {'background-color' : '#424242'} : {'background-color' : '#ff0000'}">
            test data
        </div>
    </div>
</div>