使用 ng-Style 更改背景颜色

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();
                    });
                }
            }
        });

这是我的计划：http://plnkr.co/edit/onLA8vSbtwQu1OxZrKzT?p=preview

Answer 1

您不能在标签内执行三元条件，并且由于您没有引用 background-color 而出现错误。你要么引用它，要么使用驼峰式，而条件应该在控制器中设置。

因此，解决方法是使用一个表示颜色（或完整样式对象）的范围变量并像这样使用它：http://plnkr.co/edit/iYkSa2I1ysZutdkAKkuh?p=preview

更新

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

这样您也可以获取 'selected' 颜色。根据您提供的信息，我能告诉您的差不多就是这些了。

Answer 2

有色:

return {backgroundImage:'someimg'};

Answer 3

两者是不同的风格。使用：

return {backgroundImage:'URL'};

或

return {backgroundColor:'Color'};

使用 ng-Style 更改背景颜色

Change background color with ng-Style

angularjs

angularjs-directive

angularjs-ng-repeat