angular.js app中的造型

同一頁面上有兩個按鈕可供買賣。看起來，它們都只有一個html實例。所以當我試着用class，id或者其他以html爲目標的選擇器來設計它們的樣式時，我會在同一時間以相同的規則對它們進行樣式設置。angular.js app中的造型

雖然我需要爲他們每個人不同的風格。我怎樣才能分別瞄準每個人？我想是這樣

ng-style="{'background-color': order.orderType == 1 ? ' #f6698b' : '#f6698b', 'border-color': order.orderType == 1 ? '#73a839' : '#c71c22' }"

不過，這並不影響分開他們，所以我怎麼可能對付它們？

的HTML比如我說的是：

<button class="button_buy btn btn-primary pull-right" style="width: 72px; height:35px; text-align: center;" ng-style="{'background-color': order.orderType  == 1 ? ' #f6698b' : '#f6698b', 'border-color': order.orderType == 1 ?  '#73a839' : '#c71c22' }"> 
        {{ label[order.orderType == 1 && 'buy' || 'sell'] }} 
       </button>

來源

2016-07-09 Alex Buddy

使用內嵌樣式是不定型的正確方法。你應該使用css。你也可以輕鬆區分不同的css class不同的風格。看看this，如果你不知道css如何工作。

另外，正如我所看到的，您正在使用一些Angular來區分使用哪個css屬性。這可以通過使用Angulars ngClass指令來解決。

來源

2016-07-09 10:17:34 Aer0

.button_buy { 
    -webkit-appearance:none; 
    background-image:none; 
} 

.button_buy[label="buy"] { 
    background-color:Red; 
    border-color:Purple; 
} 

.button_buy[label="sell"] { 
    background-color:Yellow; 
    border-color:Orange; 
}

來源

2016-07-09 10:23:59

它沒有工作，可能是因爲標籤donest在這裏存在爲html實例 –

ng樣式屬性應返回一個對象。您可以在控制器中定義邏輯並將該函數放入返回樣式對象的屬性中。

//in the controller 
$scope.getStyleForFirstButton = -> 
    "color":"red" 

$scope.getStyleForSecondButton = -> 
    "color":"blue" 

//in your template 
button(ng-style="getStyleForFirstButton()") 
button(ng-style="getStyleForSecondButton()")

CSS唯一的解決方案應該做的更好，更快，所以不會有更多的觀察者參與。

button:nth-child(1){ 
color: red; 
}

來源

2016-07-09 10:26:39 eyurdakul

試過了第n個孩子 - 沒有工作，當我在chrome檢查器中查看html時，總是有一個按鈕，父元素有，但事實上，您可以看到其中的兩個。我認爲角度以某種方式使用一個html實例生成它們 –

這是不可能的。甚至生成，它應該在HTML和樣式立即適用。 – eyurdakul

我希望如此，但實際上它沒有 –

我做的方法是很好，只是大概的按鈕具有從引導一些風格和它取代我的，一旦我刪除了所有的自舉類中，order.orderType不同制定出

來源

2016-07-09 10:58:29

angular.js app中的造型

回答

相關問題