angularjs angular:基于模型中的布尔值切换按钮的文本

7dl7o3gd  于 2023-09-30  发布在  Angular
关注(0)|答案(6)|浏览(95)

根据布尔值更改按钮元素中的文本的简单方法是什么?
伪代码:

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

我读到了这个:Angularjs if-then-else construction in expression
关于ng-switch:http://docs.angularjs.org/api/ng.directive:ngSwitch
使用model中的bool值似乎都不起作用

dm7nw8vv

dm7nw8vv1#

应该这样使用:

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

nxagd54h2#

我想这取决于你想展示的文本是什么。如果您可以控制控制器中的文本内容,则可以将文本绑定到范围变量并在控制器中设置它,这样就不必在视图中放置任何逻辑。例如:

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

否则,您可以在布尔条件上使用ng-if或ng-show。

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

siv3szwd3#

因为我需要对按钮文本使用过滤器(翻译过滤器),所以下面的解决方案对我来说效果最好:

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

mznpcxlj4#

当组合Angular 8 LTSTypescript 3.5ngx-bootstrap时,似乎只需要括号

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

wfypjpf45#

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

  };
});
b4lqfgs4

b4lqfgs46#

xyz.component.html

<button (click)="isCoreComponentUpdate ? onSubmit(): updateCoreComponent()">{{isCoreComponentUpdate ? 'Update' : 'Add'}}</button>
xyz.component.ts
isCoreComponentUpdate: Boolean= false;

当我们要使用相同的按钮作为添加和编辑当我们打开添加弹出窗口和编辑弹出窗口的时候,这段代码将帮助
其中'isCoreUpdate'布尔值基于我们显示标签和启用操作。

相关问题