ng-deaktiviert mit bootstrap dropdown

Question

Ich möchte, dass mein Textfeld abhängig vom Bootstrap-Dropdown-Wert deaktiviert ist. Also schrieb ich diese

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> 

Textfeld

<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> 

und hier ist Winkelregler

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

Alle oben in dem gleichen Tag sind. Alert sagt mir, dass die Funktion aufgerufen wird, aber Textfeld ist immer noch aktiviert. Kann mir jemand sagen warum? Vielen Dank!

Answer 1

Jeder Controller verfügt über einen eigenen Rahmen arbeitet und jeden Aufruf ng-controller Sie eine neue Instanz des Controllers erhalten.

So wird die checker Variable nicht zwischen den beiden Teilen geteilt, wo Sie den Controller angeben.

können Sie testen, um zu sehen, was ich mit diesem jsfiddle

Answer 2

Sie können versuchen, eine Funktion erstellen, die checker Wert zurückgibt und es verwenden, auf der ng-disabled

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

Und dann:

<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> 

Wie auch immer, warum Sie nicht verwenden $scope.checker statt this.checker? Und dann: ng-disabled="checker"

Auf der anderen Seite, schlage ich vor, dass Sie angular Routing zu "Link" Controller mit ihren Ansichten verwenden. Ich denke, das ist die beste Vorgehensweise.

Answer 3

dies versuchen, wenn es

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