Comment écrire une condition if-else à l'intérieur d'une balise de bouton HTML?

Question

J'utilise l'attribut title dans le bouton pour afficher une info-bulle sur le bouton. Je veux changer la pointe de l'outil en fonction des changements de la couleur du bouton (la couleur du bouton est modifiée en gardant une valeur variable modifiée à l'intérieur du clic du bouton) J'ai utilisé la méthode suivante. Mais ça n'a pas marché. J'utilise js angulaire. Comment puis-je resoudre ceci?

<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

Utilisez l'expression comme ceci.

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

Answer 2

Utilisez ng-attr-title="{{ vm.isColorChanged == 1 ? 'Test 1': 'Test 2'}}". ng-attr-title va définir l'attribut dynamique.

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>