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

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

Answer 2

使用像这样的表达式。

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

如何在HTML按钮标记内编写if-else条件？

2 个答案: