CODEWITHSUNDEEP
javascriptangularjs
kennechu
kennechu

Reputation: 1422

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

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.

Upvotes: 4

Views: 1344

Answers (2)

Richard Hamilton
Richard Hamilton

Reputation: 26434

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

Upvotes: 3

izambl
izambl

Reputation: 659

using the ngDisabled directive is the right way to go

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

Upvotes: 2

Related Questions