angular: alternar el texto del botón basado en el valor booleano en el modelo


¿Cuál es una forma sencilla de cambiar el texto en un elemento button basado en el valor booleano?

Pseudo código:

<button> some text OR some other text    </button>

Leo esto: Angularjs if-then-else construcción en la expresión

Y esto con respecto a ng-switch: http://docs.angularjs.org/api/ng.directive:ngSwitch

Ninguno de los dos parece funcionar usando el valor bool del modelo

Author: Andy King, 2014-01-29

5 answers

Debería usar así:

<button> {{ cond_vall == true ? 'Case 1' : 'Case 2' }}</button>
 56
Author: RockOnGom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-04 17:31:08

Supongo que depende de lo que el texto es que usted está tratando de mostrar. Si tiene control sobre lo que es el texto en el controlador, puede vincular el texto a una variable de ámbito y configurarlo en el controlador para que no tenga que poner ninguna lógica en la vista. Algo como:

<button>{{someScopeVarWithYourString}}</button>

De lo contrario, puede usar ng-if o ng-show en la condición booleana.

<button ng-show="someBoolValue">some text</button>
<button ng-show="!someBoolValue">some other text</button>
 13
Author: BoxerBucks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-29 19:11:34

Debido a que necesitaba usar un filtro (filtro de traducción) para el texto del botón, la siguiente solución funcionó mejor para mí:

<button>
    <span> {{ condition === true ? "{{ 'some_text' | translate}}" : "{{ 'some_Other_text' | translate}}"</span>
</button>
 8
Author: Tonio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-19 10:56:11

No hay suficiente rep para editar o comentar, adiciones a la respuesta de @Tonio (que no funciona para mí) Esto es correcto si quieres traducción:

<button>
    <span> {{ condition ? 'some_text' : 'some_Other_text' | translate }}</span>
</button>
 2
Author: user2235494,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-26 15:15:14
<div ng-app="myModule">
  <div ng-controller="myController">
    {{message}} <br />
    <button ng-click="changeMessage(message)">Change Message</button>
  </div>
</div>

var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
$scope.message = "Hello World";
  $scope.changeMessage = function(value) {
  if(value==="Hello World"){
  $scope.message = "Hello Universe!";
  }else{
    $scope.message = "Hello World";
  }

  };
});
 0
Author: swetha T.M,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-14 07:03:28