Javascript 角度：基于模型中的布尔值切换按钮文本

基于布尔值更改按钮元素中的文本的简单方法是什么

伪代码：

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

某些文本或其他文本

我读到：

关于ng开关：

---

使用模型中的布尔值似乎两者都不起作用，我想这取决于您试图显示的文本。如果可以控制控制器中的文本内容，则可以将文本绑定到范围变量，并在控制器中进行设置，这样就不必在视图中放置任何逻辑。比如：

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

{{someScopeVarWithYourString}

否则，可以在布尔条件下使用ng if或ng show

<button ng-show="someBoolValue">some text</button>
<button ng-show="!someBoolValue">some other text</button>

一些文本
其他一些文本

应该这样使用：

<button> {{ cond_vall == true ? 'Case 1' : 'Case 2' }}</button>

{{cond_vall==true？'Case 1'：'Case 2'}

因为我需要对按钮文本使用过滤器（翻译过滤器），以下解决方案最适合我：

{{条件？'some_text'：'some_Other_text'| translate}

没有足够的代表来编辑或评论@Tonio的答案（wich不适用于我） 如果需要翻译，这是正确的：

{{条件？'some_text'：'some_Other_text'| translate}

{{message}}

更改消息
var module=angular.module（“myModule”，[]）；
模块控制器（“myController”，功能（$scope）{
$scope.message=“你好世界”；
$scope.changeMessage=函数（值）{
如果（值==“Hello World”）{
$scope.message=“你好，宇宙！”；
}否则{
$scope.message=“你好世界”；
}
};
});

组合

Angular 8 LTS

、

Typescript 3.5

和

ngx引导时，似乎只需要括号

<button type="button" class="btn"> {{ ( boolVar ? 'text' : 'other text')  | translate }} </button>

                                            

{（布尔瓦尔？'text'：'other text'）| translate}

我最终完全按照您在第一个选项中提到的那样做了。也许这是最干净的方法。第二种方法是在两个不同的按钮之间切换，我想保留一个按钮。我同意。“最干净”的方法是从模型开始。UI视图只是模型的“转储”反映。首先，这是独立模型/视图背后的想法是的，的确如此。使您的视图不那么混乱。我对这种方法有一个奇怪的间距问题，请参见我的问题@RockOnGom：将布尔值与

真值

进行比较有什么意义？这很好：

{{cond_vall？'Case 1'：'Case 2'}}

使用

cond_vall===true

这对我来说更简单：

{（条件？'text1'：'text2'）| translate}

虽然这个代码片段可以解决这个问题，但确实有助于提高帖子的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性！

<button>
    <span> {{ condition ? 'some_text' : 'some_Other_text' | translate }}</span>
</button>

<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";
  }

  };
});

<button type="button" class="btn"> {{ ( boolVar ? 'text' : 'other text')  | translate }} </button>