Zmień kolor tła za pomocą ng-Style

Jak zmienić kolor tła za pomocą ng-style?Zmień kolor tła za pomocą ng-Style

ten DIV powtórzyć, więc jeden z kolorów jest z DB. Dla plnkr Właśnie stałe kolory, ale w moim przykładzie jest tak:

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

I dyrektywy:

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

Herezje mój plnkr: http://plnkr.co/edit/onLA8vSbtwQu1OxZrKzT?p=preview

Źródło

2015-01-24 Luis

Nie można zrobić trójargumentowy warunki w tagu i masz błąd, ponieważ nie podałeś background-color. Musisz albo zacytować, albo użyć camelCase, podczas gdy warunki powinny być ustawione w kontrolerze.

więc poprawka ma mieć zasięg zmiennych oznaczający kolor (lub cały obiekt Style) i używać go tak: http://plnkr.co/edit/iYkSa2I1ysZutdkAKkuh?p=preview

UPDATE

Oto przykład można użyć do spraw, aby twój kod działał z twoją bazą danych (dzwonię do zewnętrznego JSON-a tutaj, ale zasada jest taka sama): http://plnkr.co/edit/Kegs95NNyGGySMDzhQed?p=preview

W ten sposób możesz pobrać również "wybrany" kolor. To wszystko, co mogę powiedzieć, dzięki podanym przez ciebie informacjom.

Źródło

2015-01-24 13:22:18 Shomz

TKS Shomz, tylko pytanie, w jaki sposób można uzyskać dostęp w dyrektywie danych z DB (wiersz słucha w tej chwili), ponieważ kolor jest z DB „{{type.color}}” – Luis

Nie ma za co. Hmmm, najlepiej możesz wprowadzić usługę do kontrolera i pobrać takie dane (po prostu przypisując wartość koloru do odpowiedniej zmiennej używanej w widoku). Usługa będzie odpowiedzialna za pobieranie danych z bazy danych. – Shomz

Shomz, po prostu zmień go na ng-style = "{'background-color' :(isSelected? '{{Type.color}}': '# ccc')} tak jak powiedziałeś, ale z jakiegoś powodu nie działa w konsoli nie podawaj mi żadnych błędów – Luis

-1

youse:

return {backgroundImage:'someimg'};

Źródło

2015-11-16 09:44:41

oba są różne style. Użyj

Źródło

2017-01-09 09:46:57

Zmień kolor tła za pomocą ng-Style

Odpowiedz

Powiązane problemy