web-dev-qa-db-ja.com

ngスタイルで背景色を変更する

Ngスタイルで背景色を変更するにはどうすればよいですか？

このDivが繰り返されるので、色の1つはDBからのものです。 plnkrの場合、色を修正しただけですが、私の例では次のようになっています。

<div class="col-md-offset-0 col-md-2" ng-repeat="type in types" style="margin-bottom:5px;">
       <div class='container' divCheckbox  ng-style="{'background-color':(isSelected?'{{type.color}}':'#ccc')}>
            <input type='hidden' ng-model="type.show" />
            <div class="label">{{type.name}}</div>
       </div>
</div>

そして指令：

.directive('divCheckbox', function () {
            return {
                restrict: 'A',
                link: function (scope, el, attr) {
                    scope.isSelected = el.find('input').val() == 'false';
                    el.on('click', function () {
                        scope.isSelected = !scope.isSelected;
                        scope.$apply();
                    });
                }
            }
        });

Heres my plnkr： http://plnkr.co/edit/onLA8vSbtwQu1OxZrKzT?p=preview

angularjsangularjs-directiveangularjs-ng-repeat
7
Luis

タグ内で3項条件を実行することはできません。background-colorを引用していないため、エラーが発生します。条件をコントローラーで設定する必要がありますが、引用するか、キャメルケースを使用する必要があります。

したがって、修正は、色（または完全なスタイルオブジェクト）を示すスコープ変数を設定し、次のように使用することです http://plnkr.co/edit/iYkSa2I1ysZutdkAKkuh?p=preview

更新

これは、コードをDBで機能させるために使用できる例です（ここでは外部JSONを呼び出していますが、原理は同じです）。 http://plnkr.co/edit/Kegs95NNyGGySMDzhQed?p=preview

このようにして、「選択された」色を取得することもできます。あなたが提供した情報で私があなたに伝えることができるほとんどすべてです。

3
Shomz

どちらも異なるスタイルです。使用する：

return {backgroundImage:'URL'};

または

return {backgroundColor:'Color'};
1
Vishnu T Asok