ng-disabled with bootstrapドロップダウン

Question

ブートストラップのドロップダウン値に応じてテキストフィールドを無効にしたいですか？ は、だから私はこの

ドロップダウン

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

テキストフィールド

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

を書いて、ここで、角度コントローラ上記のすべてが同じタグである

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

です。 Alertは、関数は呼び出されていますが、textfieldは引き続き有効であることを示しています。誰かがなぜ私のことを伝えることができますか？ありがとう！

Answer 1

を動作するかどうか、各コントローラは、独自のスコープを持ち、ng-controllerを呼び出すたび、あなたはコントローラの新しいインスタンスを取得し、これを試してみてください。

checker変数は、コントローラを指定する2つの部分で共有されません。

あなたはこのjsfiddle

Answer 2

あなたはchecker値を返す関数を作成してみてください、その後、NG-無効

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

そして上でそれを使用することができますなぜあなたは$scope.checkerの代わりを使用していない、とにかく

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

this.checker？それでは：角度ルーティングを使用してコントローラをビューに「リンク」することをお勧めします。私はベストプラクティスだと思う。

Answer 3

は、それが

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