Disable angular button using ng-disable using $scope var in controller

Question

I have two buttons in my view and I want to disable the Summary button until my view is loaded.

<div class="btn-group" ng-init="showData = 1">
    <button ng-model="showData" type="button" ng-class='{"btn btn-primary": showData == 1, "btn btn-white": showData != 1}' ng-click="showData = 1">Headline</button>
    <button ng-model="showData" type="button" ng-class='{"btn btn-primary":showData == 2, "btn btn-white": showData != 2}'  ng-click="showData = 2; summaryCall()">Summary</button>
</div>

I have a variable $scope.loadMainView = false, this change to true when the response of a Web service is ok, so I want want to disable my button until that variable change to true, but I dont know how to achive that. I was thinking on ng-init for a $scope variable to be initialized as false and then asing that to an ng-disable or something like that but I'm not sure, Im new in angular and maybe my approach is not at all correct.

Some help will be great.

Setting its initial value to false and changing it when receiving response from your service is a good way of handling this. — Ivanka Todorova
– Ivanka Todorova, Commented Jun 22, 2016 at 19:58
But in the view I dont know what to put, ng-init or what? I was thinking on create a $scope variable and set the default value to false until the services response is ok, my problem is on the view that I dont know how to manage that.. — kennechu
– kennechu, Commented Jun 22, 2016 at 20:02

Richard Hamilton · Accepted Answer · 2016-06-22 20:00:19Z

3

Use ng-disabled

<button ng-disabled="!loadMainView" type="button"></button>

This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy.

https://docs.angularjs.org/api/ng/directive/ngDisabled

answered Jun 22, 2016 at 20:00

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

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

2 Comments

kennechu Over a year ago

Hi Richard, thanks for your time, one more question, what if I want to evaluate to variales, like this? ng-disabled="!loadMainView || !loadSecondaryView Is that correct?

Richard Hamilton Over a year ago

ng-disabled simply evaluates the subsequent expression. In this case it would mean only one of those two would have to be correct

izambl · Accepted Answer · 2016-06-22 20:00:03Z

2

using the ngDisabled directive is the right way to go

<button ng-disabled="!loadMainView" type="button"></button>

answered Jun 22, 2016 at 20:00

izambl

6794 silver badges10 bronze badges

1 Comment

kennechu Over a year ago

Thanks for your time :)

Collectives™ on Stack Overflow

Disable angular button using ng-disable using $scope var in controller

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related