如何在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>