如何在HTML按鈕標籤內編寫if-else條件？

Question

我在按鈕中使用title屬性來顯示按鈕上的工具提示。我想根據按鈕顏色的變化改變工具提示（通過在點擊按鈕內部保持一個可變的值而改變按鈕顏色）我已經使用了下面的方法。但它沒有奏效。我正在使用角度js。我該如何解決這個問題？

<button type="button" ng-click="vm.sortBy()" class="btn change- 
    button-color-{{vm.isColorChanged}} btn-circle btn-xs " 
    title="({{vm.isColorChanged}}==1) ? Test 1: Test 2" 
           data-toggle="modal"> 

    <strong >Sort</strong>--> 
</button> 

Answer 1

使用這樣的表達式。

title="{{ vm.isColorChanged == 1 ? 'Test 1': 'Test 2'}}" 

Answer 2

使用ng-attr-title="{{ vm.isColorChanged == 1 ? 'Test 1': 'Test 2'}}"。 ng-attr-title將設置動態屬性。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function ($scope) { 
 
    var _self = this; 
 
    _self.isColorChanged = 1; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl as vm"> 
 

 
    <button type="button" ng-click="vm.sortByCutoffs()" 
 
      class="btn change-button-color-{{vm.isColorChanged}} btn-circle btn-xs " 
 
      ng-attr-title="{{ vm.isColorChanged == 1 ? 'Test 1': 'Test 2'}}" 
 
      data-toggle="modal"> 
 

 
     <strong>Sort</strong> 
 
    </button> 
 
</div>