Changer la couleur de fond avec ng-Style

Question

Comment puis-je changer la couleur de fond avec ng-style?

cette Div va répéter si celle de la couleur est de DB. Pour le plnkr je viens de fixer les couleurs, mais dans mon exemple, c'est comme ça:

<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>

Et la directive:

.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

Answer 1

Vous ne pouvez pas créer de conditions ternaires dans une balise et vous avez une erreur puisque vous n'avez pas cité background-color. Vous devez le citer ou utiliser camelCase, tandis que les conditions doivent être définies dans le contrôleur.

Donc, le correctif consiste à avoir une variable d'étendue indiquant une couleur (ou l'objet de style complet) et à l'utiliser comme ceci: http://plnkr.co/edit/iYkSa2I1ysZutdkAKkuh?p=preview

---

METTRE À JOUR

Voici un exemple que vous pouvez utiliser pour que votre code fonctionne avec votre base de données (j'appelle ici du JSON externe, mais le principe est le même): http://plnkr.co/edit/Kegs95NNyGGySMDzhQed?p=preview

De cette façon, vous pouvez également récupérer la couleur "sélectionnée". C'est à peu près tout ce que je peux vous dire avec les informations que vous avez fournies.

Answer 2

Les deux sont des styles différents. Utilisation:

return {backgroundImage:'URL'};

ou

return {backgroundColor:'Color'};