CODEWITHSUNDEEP
angularjstwitter-bootstrap
JohnnyGat
JohnnyGat

Reputation: 335

ng-disabled with bootstrap dropdown

I'd like my textfield be disabled depending on the bootstrap dropdown value. So I wrote this

Dropdown

<div class="dropdown">
<div ng-controller="dropDownCtrl">
<button class="btn btn-primary dropdown-toggle" type="button"  data-toggle="dropdown">
{{selectedItem}}<span class="caret"></span>
</button>
<ul class="dropdown-menu" ng-model="dropDown">
<li ng-repeat="a in subjects"><a ng-click="dropboxitemselected(a)">{{a}}</a></li>
</ul>
</div>

textfield

<div ng-controller="dropDownCtrl as ddc">
<label for="requester">Requester</label>
<input type="text" class="form-control" ng-disabled="ddc.checker" ng-model="requester"  id="requester" placeholder="requester" />
</div>

and here's angular controller

app.controller('dropDownCtrl', function ($scope) {

$scope.subjects = ['Yes','No'];
this.checker=false;
$scope.selectedItem;

$scope.dropboxitemselected = function (item) {
  $scope.selectedItem = item;
  if($scope.selectedItem == "Yes") {
      this.checker=true;
      alert($scope.selectedItem);
    }
}
});

All of the above are in the same tag. Alert tells me that function is called however textfield is still enabled. Can somebody tell my why ? Thanks!

Upvotes: 3

Views: 1105

Answers (3)

Emile Bergeron
Emile Bergeron

Reputation: 17430

Each controller has its own scope, and each call to ng-controller, you get a new instance of the controller.

So the checker variable does not get shared between the two parts where you're specifying the controller.

You may test to see what I mean with this jsfiddle

Upvotes: 1

Roger Garcia
Roger Garcia

Reputation: 357

You can try creating a function that returns checker value and use it on the ng-disabled

$scope.disabledFunc = function () {
    return this.checker //I would use $scope.checker...
}

And then:

<div ng-controller="dropDownCtrl as ddc">
<label for="requester">Requester</label>
<input type="text" class="form-control" ng-disabled="disabledFunc()" ng-model="requester"  id="requester" placeholder="requester" />
</div>

Anyway, why don't you use $scope.checker instead of this.checker? And then: ng-disabled="checker"

On the other hand, I suggest you to use angular routing to "link" controllers with their views. I think is the best practice.

Upvotes: 0

Indra Uprade
Indra Uprade

Reputation: 808

Try this if it works

app.controller('dropDownCtrl', function ($scope) {

$scope.subjects = ['Yes','No'];
$scope.checker=false;
$scope.selectedItem;

$scope.dropboxitemselected = function (item) {
  $scope.selectedItem = item;
  if($scope.selectedItem == "Yes") {
      $scope.checker=true;
      alert($scope.selectedItem);
    }
}
});

Upvotes: 1

Related Questions