Wenden Sie das CSS-Stilattribut dynamisch in Angular JS an

112

Dies sollte ein einfaches Problem sein, aber ich kann anscheinend keine Lösung finden.

Ich habe das folgende 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 Bereich 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 einige Nachforschungen angestellt und herausgefunden ng-style, aber das hat nicht funktioniert, also habe ich versucht, den dynamischen Teil herauszunehmen und den Stil einfach so fest zu codieren ng-style...

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

und das funktioniert nicht mal. Verstehe ich falsch, wie es ng-stylefunktioniert? Gibt es eine Möglichkeit, {{data.backgroundCol}}ein einfaches Stilattribut einzufügen und den Wert einzufügen?

Jonhobbs
quelle
Kasse diesen Artikel: ecofic.com/about/blog/…
Rohit

Antworten:

190

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

Ausdrücke, die zu einem Objekt ausgewertet werden, dessen Schlüssel Namen und Werte im CSS-Stil sind, sind entsprechende Werte für diese CSS-Schlüssel. 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 Geigen, die verwenden ngStyle, 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>

StarsSky
quelle
Ich möchte die ursprüngliche Hintergrundfarbe des aktuell angeklickten Elements und nicht die Hintergrundfarbe erhalten, wenn ich mit der Maus darüber fahre. Wenn ich Folgendes verwende, erhalte ich die Schwebe-Hintergrundfarbe, nicht die Originalfarbe: $ event.currentTarget.currentStyle.backgroundColor; Irgendeine Idee, wie man die ursprüngliche Hintergrundfarbe erhält?
Mahesh
<div ng-style = "{'Hintergrundfarbe': data.backgroundCol}"> </ div> sollte <div ng-style = "{Hintergrundfarbe: data.backgroundCol}"> </ div>
eric2323223 sein
24

Am einfachsten ist es, eine Funktion für den Stil aufzurufen und die Funktion den richtigen Stil zurückgeben zu lassen.

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

Und in Ihrem Controller:

$scope.functionThatReturnsStyle = function() {
  var style1 = "width: 300px";
  var style2 = "width: 200px";
  if(condition1)
     return style1;
  if(condition2)
     return style2;
}
Bennett
quelle
4
Ich würde das nicht empfehlen, bei
Angular
7
Ich empfehle dies auch nicht, dies wird nur in wenigen Browsern wie Chrome funktionieren, aber wenn Sie sich IE 9+ ansehen, wird dies nicht funktionieren
imal hasaranga perera
Tatsächlich funktioniert dies in IE11 immer noch nicht. Ich habe Code aus einem früheren Projekt kopiert und war verwirrt, als es nicht funktionierte. Das vorherige Projekt verwendete Chrome
csharpsql
18

Direkt aus der ngStyle Dokumentation :

Ausdrücke, die zu einem Objekt ausgewertet werden, dessen Schlüssel Namen und Werte im CSS-Stil sind, 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!

jakee
quelle
4
Ja, das habe ich in den Dokumenten gesehen, aber ich konnte nicht sehen, wie man das in mehrere Regeln übersetzt. Jetzt kann ich sehen, dass es nicht die normale CSS-Syntax ist, sondern die Objektsyntax.
Jonhobbs
14

Generell können Sie eine Kombination aus ng-if und ng-style verwenden, um bedingte Änderungen mit Änderungen im Hintergrundbild zu berücksichtigen.

<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>
TS Shriram
quelle
0

Ich würde sagen, dass Sie Stile, die sich nicht ändern, in ein reguläres styleAttribut und Bedingungs- / Bereichsstile in ein ng-styleAttribut einfügen sollten. Zeichenfolgenschlüssel sind ebenfalls nicht erforderlich. Verwenden Sie für durch Bindestriche getrennte CSS-Schlüssel camelcase.

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

Mach das einfach:

<div ng-style="{'background-color': '{{myColorVariable}}', height: '2rem'}"></div>

Srk95
quelle