javascript - 当使用 AngularJS 禁用按钮时，如何更改按钮的文本？

Question

我有一个“保存”按钮，当表单处于原始状态时该按钮被禁用。我希望它在原始时显示“已保存”，然后在表单脏时更改为“保存”。除了按钮的文本发生变化之外，工作正常。这是代码:

     <input type="button" value="SAVED" class="button success radius expand" ng-click="save(form)" ng-disabled="!signupform.$dirty" ng-class="{disabled:!signupform.$dirty}">

Answer 1

如果你想内联，只需这样做:

<input type="button" value="{{(signupform.$dirty)? 'save' : 'saved'}}" class="button success radius expand" ng-click="save(form)" ng-disabled="!signupform.$dirty" ng-class="{disabled:!signupform.$dirty}">

您还可以在 Controller 中创建一个函数来返回文本。如果您的逻辑较大(针对各种特定情况的不同文本)，这可能很有用。

html

     <input type="button" value="{{getInputText()}}" class="button success radius expand" ng-click="save(form)" ng-disabled="!signupform.$dirty" ng-class="{disabled:!signupform.$dirty}">

Controller :

function getInputText(form) {
    return (form.$dirty)? 'save' : 'saved';
}