wake-up-neo.com

Wenden Sie das CSS-Stilattribut in Angular JS dynamisch an

Dies sollte ein einfaches Problem sein, aber ich finde keine Lösung.

Ich habe folgendes Markup:

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

Ich brauche die Hintergrundfarbe, um an den Umfang gebunden zu sein, also habe ich Folgendes versucht:

<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>

Das hat nicht funktioniert, also habe ich etwas recherchiert und ng-style gefunden, aber das hat nicht funktioniert, also habe ich versucht, den dynamischen Teil herauszunehmen und den Stil einfach in ng-style fest zu kodieren, wie hier ...

<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>

und das geht gar nicht. Missverstehe ich, wie ng-style funktioniert? Gibt es eine Möglichkeit, {{data.backgroundCol}} in ein einfaches Stilattribut zu setzen und den Wert einzufügen?

javascriptangularjsng-style
110
jonhobbs

Mit der Direktive ngStyle können Sie den Stil CSS für ein HTML-Element dynamisch festlegen.

Ausdruck der sich auf ein Objekt bezieht, dessen Schlüssel CSS-Stilnamen sind und Werte entsprechende Werte für diese CSS-Schlüssel sind. Da einige CSS-Stilnamen keine gültigen Schlüssel für ein Objekt sind, müssen sie in Anführungszeichen gesetzt werden. 

ng-style="{color: myColor}"

Ihr Code lautet:

<div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div>

Wenn Sie Bereichsvariablen verwenden möchten:

<div ng-style="{'background-color': data.backgroundCol}"></div>

Hier ein Beispiel für die Geige, das ngStyle verwendet, und unter dem Code mit dem laufenden Snippet:

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  $scope.items = [{
      name: 'Misko',
      title: 'Angular creator'
    }, {
      name: 'Igor',
      title: 'Meetup master'
    }, {
      name: 'Vojta',
      title: 'All-around superhero'
    }

  ];
});
.pending-delete {
  background-color: pink
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyCtrl' ng-style="{color: myColor}">

  <input type="text" ng-model="myColor" placeholder="enter a color name">

  <div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
    name: {{item.name}}, {{item.title}}
    <input type="checkbox" ng-model="item.checked" />
    <span ng-show="item.checked"/><span>(will be deleted)</span>
  </div>
  <p>
    <div ng-hide="myColor== 'red'">I will hide if the color is set to 'red'.</div>
</div>

185
StarsSky

Der einfachste Weg ist, eine Funktion für den Stil aufzurufen und die Funktion den korrekten Stil zurückgeben zu lassen.

<div style="{{functionThatReturnsStyle()}}"></div>

Und in deinem Controller:

$scope.functionThatReturnsStyle = function() {
  var style1 = "width: 300px";
  var style2 = "width: 200px";
  if(condition1)
     return style1;
  if(condition2)
     return style2;
}
23
Bennett

Direkt aus ngStyledocs :

Ausdruck, der sich auf ein Objekt bezieht, dessen Schlüssel CSS-Stilnamen und .__ sind. Werte sind entsprechende Werte für diese CSS-Schlüssel.

<div ng-style="{'width': '20px', 'height': '20px', ...}"></div>

Sie könnten also folgendes tun:

<div ng-style="{'background-color': data.backgroundCol}"></div>

Hoffe das hilft!

18
jakee

In einer allgemeinen Anmerkung können Sie eine Kombination aus ng-if und ng-style verwenden, um bedingte Änderungen mit Änderungen im Hintergrundbild zu integrieren.

<span ng-if="selectedItem==item.id"
      ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
 <span ng-if="selectedItem!=item.id"
       ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
14
TS Shriram

Ich würde sagen, Sie sollten Stile, die sich nicht in ein reguläres style-Attribut ändern, und bedingte/Bereichsstile in ein ng-style-Attribut einfügen. String-Schlüssel sind auch nicht erforderlich. Verwenden Sie für durch Bindestrich getrennte CSS-Schlüssel camelcase. 

<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>
0
omikes