angular.jsアプリのスタイリング

Question

同じページの購入と販売には2つのボタンがあります。それは、両方のhtmlインスタンスが1つしかないようです。だから私がclass、id、または他のhtmlターゲットセレクタでそれらのスタイルを設定しようとすると、私は同じルールでそれらのスタイルを同時に設定します。

私はそれらのそれぞれに異なるスタイルが必要ですが。それぞれを個別にどのようにターゲット設定できますか？ は私が

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> 

Answer 1

インラインスタイルを使用すると、スタイリングの適切な方法ではありません。 cssを使用してください。また、css classごとに異なるスタイルを簡単に区別することもできます。 cssの仕組みがわからない場合は、thisをご覧ください。

また、使用するCSSプロパティを区別するためにAngularを使用しています。これは、Angulars ngClass指示文を使用することで解決できます。

Answer 2

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

Answer 3

ng-style属性はオブジェクトを返さなければなりません。コントローラ内でロジックを定義し、そのスタイルオブジェクトを返す属性に関数を配置することができます。

//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; 
} 

Answer 4

私がやった方法は大丈夫だった、ただおそらくボタンは、ブートストラップから、いくつかのスタイルを持っており、それは私を交換し、私はすべてのブートストラップクラスを削除した後に、明確なorder.orderTypeは、それが仕事をdidntの