AngularJS ng-style với biểu thức điều kiện

Tôi đang xử lý vấn đề của mình như thế này:

ng-style="{ width: getTheValue() }"

Nhưng để tránh có chức năng này ở phía bộ điều khiển, tôi rất thích làm điều gì đó như thế này:

ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }"

Tôi có thể làm cái này như thế nào?

Như @Yoshi đã nói, từ góc 1.1.5, bạn có thể sử dụng nó mà không có bất kỳ thay đổi nào.

Nếu bạn sử dụng góc <1.1.5, bạn có thể sử dụng ng-class .

.largeWidth {
    width: 100%;
}

.smallWidth {
    width: 0%;
}

// [...]

ng-class="{largeWidth: myVar == 'ok', smallWidth: myVar != 'ok'}"

ví dụ đơn giản:

<div ng-style="isTrue && {'background-color':'green'} || {'background-color': 'blue'}" style="width:200px;height:100px;border:1px solid gray;"></div>

{'màu nền': 'xanh'} TRẢ LẠI đúng

HOẶC kết quả tương tự:

<div ng-style="isTrue && {'background-color':'green'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

khả năng có điều kiện khác:

<div ng-style="count === 0 && {'background-color':'green'}  || count === 1 && {'background-color':'yellow'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

Bạn có thể đạt được nó như thế:

ng-style="{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }"

@jfredsilva rõ ràng có câu trả lời đơn giản nhất cho câu hỏi:

ng-style = "{'width': (myObject.value == 'ok')? '100%': '0%'}"

Tuy nhiên, bạn có thể thực sự muốn xem xét câu trả lời của tôi cho một cái gì đó phức tạp hơn.

Ví dụ giống như ternary:

<p ng-style="{width: {true:'100%',false:'0%'}[myObject.value == 'ok']}"></p>

Một cái gì đó phức tạp hơn:

<p ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">Test</p>

Nếu $scope.color == 'blueish', màu sẽ là 'màu xanh'.

Nếu $scope.zoom == 2, cỡ chữ sẽ là 26px.

angular.module('app',[]);
function MyCtrl($scope) {
  $scope.color = 'blueish';
  $scope.zoom = 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl" ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">
  color = {{color}}<br>
  zoom = {{zoom}}
</div>

nếu bạn muốn sử dụng với biểu thức, cách cứng nhắc là:

<span class="ng-style: yourCondition && {color:'red'};">Sample Text</span>

nhưng cách tốt nhất là sử dụng ng-class

Trên một ghi chú chung, bạn có thể sử dụng kết hợp ng-ifvà ng-stylekết hợp các thay đổi có điều kiện với thay đổi trong hình nền.

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

Đối với tài sản css duy nhất

ng-style="1==1 && {'color':'red'}"

Đối với nhiều thuộc tính css dưới đây có thể được giới thiệu

ng-style="1==1 && {'color':'red','font-style': 'italic'}"

Thay thế 1 == 1 bằng biểu thức điều kiện của bạn

Ngoài ra cú pháp này cho toán tử ternary sẽ hoạt động:

  ng-style="<$scope.var><condition> ? {
        '<css-prop-1>':((<value>) / (<value2>)*100)+'%',
        '<css-prop-2>':'<string>'
      } : {
        '<css-prop-1>':'<string>',
        '<css-prop-2>':'<string>'
      }"

nơi <value>là $ giá trị tài sản phạm vi. Trong ví dụ:

ng-style="column.histograms.value=>0 ? 
  {
    'width':((column.histograms.value) / (column.histograms.limit)*100)+'%',
    'background':'#F03040'
  } : {
    'width':'1px',
    'background':'#2E92FA'
  }"

`` `

điều này cho phép một số tính toán vào các giá trị thuộc tính css.

Tôi đang làm như dưới đây cho nhiều điều kiện độc lập và nó hoạt động như sự quyến rũ:

<div ng-style="{{valueFromJS}} === 'Hello' ? {'color': 'red'} : {'color': ''} && valueFromNG-Repeat === '{{dayOfToday}}' ? {'font-weight': 'bold'} : {'font-weight': 'normal'}"></div>

Tôi đang sử dụng ng-class để thêm phong cách: -

 ng-class="column.label=='Description'  ? 'tableStyle':                     
           column.label == 'Markdown Type' ? 'Mtype' : 
           column.label == 'Coupon Number' ? 'couponNur' :  ''
           "

Sử dụng toán tử ternary cùng với các chỉ thị ng-class trong angular.js để tạo kiểu. Sau đó, xác định kiểu cho lớp trong tệp .css hoặc .scss . Ví dụ :-

.Mtype{
       width: 90px !important;
       min-width: 90px !important;
       max-width: 90px !important;
      }
.tableStyle{
         width: 129px !important;
         min-width: 129px !important;
         max-width: 129px !important;
}
.couponNur{
         width: 250px !important;
         min-width: 250px !important;
         max-width: 250px !important;
}

Không chắc nó hoạt động như thế nào với các bạn, nhưng trên Angular 9 tôi phải bọc ngStyle trong ngoặc như thế này:

[ng-style]="{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }"

Nếu không thì nó không hoạt động