Question

如何使用ng-style更改背景颜色？

这个Div会重复，所以其中一个颜色来自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();
                    });
                }
            }
        });

继承我的plnkr：http://plnkr.co/edit/onLA8vSbtwQu1OxZrKzT?p=preview

Answer 1

您不能在标记内执行三元条件，并且由于您没有引用background-color而导致错误。您必须引用它，或使用camelCase，而条件应在控制器中设置。

因此，修复方法是使用一个范围变量来表示颜色（或完整样式对象）并使用它如下所示：http://plnkr.co/edit/iYkSa2I1ysZutdkAKkuh?p=preview

更新

这是一个可以用来使你的代码与你的数据库一起工作的例子（我在这里调用外部JSON，但原理是相同的）：http://plnkr.co/edit/Kegs95NNyGGySMDzhQed?p=preview

这样您也可以获取“选定”颜色。这几乎是我能用你提供的信息告诉你的。

Answer 2

两者都有不同的风格。使用：

return {backgroundImage:'URL'};

或

return {backgroundColor:'Color'};

Answer 3

有色：

return {backgroundImage:'someimg'};

使用ng-Style更改背景颜色

3 个答案: