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

以上所有内容都在同一个标签中。警告告诉我函数被调用但文本字段仍然启用。有人可以告诉我为什么吗？谢谢！

Answer 1

尝试此操作

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

Answer 2

每个控制器都有自己的范围，每次调用ng-controller，都会获得一个新的控制器实例。

因此checker变量不会在您指定控制器的两个部分之间共享。

您可以通过此jsfiddle

测试一下我的意思

Answer 3

您可以尝试创建一个返回checker值的函数，并在ng-disabled

上使用它

$scope.disabledFunc = function () {
    return this.checker //I would use $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>

无论如何，为什么不使用$scope.checker代替this.checker？然后：ng-disabled="checker"

另一方面，我建议您使用角度路由到＆＃34; link＆＃34;控制器与他们的意见。我认为这是最好的做法。

ng-disabled with bootstrap dropdown

3 个答案: