在Angular JS中動態應用CSS樣式屬性

102

這應該是一個簡單的問題，但我似乎無法找到解決方案。在Angular JS中動態應用CSS樣式屬性

我有以下標記：

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

我需要的背景顏色綁定到的範圍，所以我想這：

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

那沒有工作，所以我做到了一些研究，發現ng-style，但沒有工作，所以我試圖把動態的一部分，只是硬編碼ng-style的風格，像這樣...

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

而且甚至不起作用。我誤解ng-style是如何工作的？有沒有辦法將{{data.backgroundCol}}放入一個普通的樣式屬性中並讓它插入值？

來源

2014-01-26 jonhobbs

結帳這篇文章：http://www.ecofic.com/about/blog/conditionally-apply-a-css-class-with-angularjs – Rohit

175

ngStyle指令允許您動態地在HTML元素上設置CSS樣式。

Expression哪個對象的鍵值是CSS樣式名稱和值是這些CSS鍵值的對應值。由於某些CSS樣式名稱不是對象的有效鍵，因此必須引用它們。

ng-style="{color: myColor}"

您的代碼將是：

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

如果你想使用範圍變量：

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

Here在使用ngStyle小提琴的例子，下面使用正在運行的代碼段的代碼：

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>

來源

2014-01-26 14:25:32 StarsSky

我想在懸停時獲取當前點擊元素的原始背景顏色，而不是背景顏色。使用以下給我懸停的背景顏色，而不是原來的顏色： $ event.currentTarget.currentStyle.backgroundColor; 任何想法如何獲得原始背景顏色？ – Mahesh

應該是

– eric2323223

直接從ngStyledocs：這evals一個對象，它的鍵是CSS樣式名稱和值對應的那些CSS鍵的值

表達。

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

所以，你可以這樣做：

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

希望這有助於！

來源

2014-01-26 14:21:16 jakee

是的，我看到的文檔，但我不能看不出如何將其轉換爲多個規則，現在我可以看到它不是正常的css語法，而是對象語法。 – jonhobbs

在一個通用的筆記，你可以使用的NG-如果和NG-風格結合結合與背景圖像變化條件的變化。

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

來源

2014-09-21 15:23:52

最簡單的方法是調用樣式的函數，並讓函數返回正確的樣式。

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

而在你的控制器：

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

來源

2014-10-10 14:19:50 Bennett

我不會推薦，角度是關於在視圖中保留樣式細節 – OlivierM

我不建議這樣做，這隻會在少量瀏覽器如chrome中工作，但如果你看看IE 9+將不會工作 –

事實上，這仍然不能在IE11中工作，我複製了以前的項目中的一些代碼，並且當它沒有工作時感到困惑，之前的項目使用Chrome – csharpsql

我要說的是，你應該把風格不會改變成正style屬性和條件/範圍樣式到ng-style屬性。另外，字符串鍵不是必需的。對於連字符分隔的CSS鍵，請使用camelcase。

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

來源

2018-02-08 19:08:56 oMiKeY

在Angular JS中動態應用CSS樣式屬性

回答

相關問題