angular:根据模型中的布尔值切换按钮文本

Cod*_*oad 30 javascript angularjs

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

伪代码:

<button> some text OR some other text </button>
Run Code Online (Sandbox Code Playgroud)

我读到了这个:表达式中的Angularjs if-then-else构造

这关于ng-switch:http://docs.angularjs.org/api/ng.directive : ngSwitch

似乎都没有使用模型中的bool值

Roc*_*Gom 80

应该这样使用:

<button> {{ cond_vall == true ? 'Case 1' : 'Case 2' }}</button>
Run Code Online (Sandbox Code Playgroud)

  • 这应该是公认的答案.比使用'ng-show`的两个按钮更清洁. (7认同)
  • @RockOnGom:将布尔值与'true'进行比较有什么意义?这很好用:`{{cond_vall?'案例1':'案例2'}}` (5认同)

Box*_*cks 14

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

<button>{{someScopeVarWithYourString}}</button>
Run Code Online (Sandbox Code Playgroud)

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

<button ng-show="someBoolValue">some text</button>
<button ng-show="!someBoolValue">some other text</button>
Run Code Online (Sandbox Code Playgroud)


Ton*_*nio 10

因为我需要为按钮文本使用过滤器(翻译过滤器),所以以下解决方案最适合我:

<button>
    <span> {{ condition ? 'some_text' : 'some_Other_text' | translate }}</span>
</button>
Run Code Online (Sandbox Code Playgroud)

  • 这对我来说更简单:`<button> {{(condition?'text1':'text2')| 翻译}} </ button>` (5认同)