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

继承人我的plnkr: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

这样您也可以获取“选定的”颜色。根据您提供的信息，我能告诉您的几乎就是这些。