it-swarm.com.de

Hintergrundfarbe mit ng-Style ändern

Wie kann ich die Hintergrundfarbe im ng-style ändern?

diese Div wird sich wiederholen, also ist die Farbe von der DB. Für das Plnkr habe ich nur die Farben festgelegt, aber in meinem Beispiel ist das so:

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

Und die Richtlinie:

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

Hier ist mein plnkr: http://plnkr.co/edit/onLA8vSbtwQu1OxZrKzT?p=preview

5
Luis

Sie können innerhalb eines Tags keine ternären Bedingungen ausführen und haben einen Fehler, da Sie background-color nicht angegeben haben. Sie müssen es entweder angeben oder camelCase verwenden, während die Bedingungen in der Steuerung festgelegt werden sollten.

Das Update besteht also darin, eine Bereichsvariable zu haben, die eine Farbe (oder das vollständige Stilobjekt) kennzeichnet, und es folgendermaßen zu verwenden: http://plnkr.co/edit/iYkSa2I1ysZutdkAKkuh?p=preview


AKTUALISIEREN

Hier ein Beispiel, mit dem Sie Ihren Code mit Ihrer Datenbank arbeiten lassen können (ich nenne hier externe JSON, das Prinzip ist jedoch dasselbe): http://plnkr.co/edit/Kegs95NNyGGySMDzhQed?p=preview

Auf diese Weise können Sie auch die 'ausgewählte' Farbe abrufen. Das ist so ziemlich alles, was ich Ihnen mit den von Ihnen angegebenen Informationen sagen kann.

3
Shomz

Beide sind unterschiedliche Stile. Benutzen:

return {backgroundImage:'URL'};

oder

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