How can I change the text of a button when it is disabled using 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}">

Why -1? $pristine and $dirty are valid angularjs properties. docs.angularjs.org/api/ng/type/form.FormController#$pristine — Wédney Yuri
– Wédney Yuri, Commented Apr 10, 2015 at 12:27

Wédney Yuri · Accepted Answer · 2015-04-10 03:21:11Z

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

answered Apr 10, 2015 at 3:21

Wédney Yuri

1,26712 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I change the text of a button when it is disabled using AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related