up vote 3 down vote favorite

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.

share
1  
Setting its initial value to false and changing it when receiving response from your service is a good way of handling this. – Ivanka Todorova Jun 22 '16 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 Jun 22 '16 at 20:02
up vote 2 down vote accepted

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

share
    
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? – kennechu Jun 22 '16 at 20:27
1  
ng-disabled simply evaluates the subsequent expression. In this case it would mean only one of those two would have to be correct – Richard Hamilton Jun 22 '16 at 20:28
up vote 2 down vote

using the ngDisabled directive is the right way to go

<button ng-disabled="!loadMainView" type="button"></button>
share
    
Thanks for your time :) – kennechu Jun 22 '16 at 20:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.