如何在 HTML 按钮标签中编写 if-else 条件？答案

【问题标题】：How to write an if-else condition inside a HTML button tag?如何在 HTML 按钮标签中编写 if-else 条件？
【发布时间】：2017-10-19 16:37:55
【问题描述】：

我在按钮中使用标题属性在按钮上显示工具提示。我想根据按钮颜色的变化来改变工具提示。（通过在按钮点击内部保持变量值的变化来改变按钮颜色）我使用了以下方法。但它没有用。我正在使用角度 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>

【问题讨论】：

标签： html css angularjs

【解决方案1】：

使用这样的表达方式。

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

【讨论】：

【解决方案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>

【讨论】：