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

Question

I have a SAVE button that is disabled when a form is pristine. I want it to say SAVED when pristine and then change to SAVE when the form is dirty. Working fine except the text change for the button. Here is the code:

     <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

If you want to make inline just do:

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

You can also create a function in your controller to return the text. This can be useful if your logic is larger (different texts for various specific cases).

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