Question

同一页面上有两个按钮买入和卖出。看来，两者都只有一个html实例。因此，当我尝试使用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。

另外，正如我所看到的，您正在使用一些Angular来区分要使用的css属性。这可以通过使用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

我的方式很好，可能按钮有一些来自bootstrap的样式并且它取代了我的，一旦我删除了所有的bootstrap类，order.orderType明显解决了

在angular.js应用程序中设置样式

4 个答案: