AngularJS 在 ng-repeat 中禁用一个下拉菜单答案

【问题标题】：AngularJS disabling one dropdown in ng-repeatAngularJS 在 ng-repeat 中禁用一个下拉菜单
【发布时间】：2014-05-18 09:20:10
【问题描述】：

我的 HTML 代码中有以下 ng-repeat：

<div ng-repeat="a in items">
  <div>
    <span>{{a.name}}</span>
  </div>
  <div>
    <select ng-model="a.c_id" ng-options="d.c_id as d.description for d in loclist" ng-disabled="display" ng-change="selected(a.c_id)">
    </select>
  </div>

然后在我的控制器中我有：

$scope.display = false;
$scope.selected = function (value) {
    $scope.te = value;
    if ($scope.te == 3) {
        $scope.display = true;
    }        
};

我面临的问题是，当我更改下拉列表中的选择时，它应该根据值禁用或启用下拉列表。但是，当我在其中一个值为 3 的下拉菜单中更改选择时，所有下拉菜单都会更改为禁用状态，而不是那个特定的状态。

请让我知道如何修复此代码，以便在 ng-repeat 显示所有行并且我更改其中一行的下拉值时，它只会禁用该特定行，而不是禁用所有行中的所有下拉列表。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

Angular ng-repeat 创建子范围继承自父范围。在您的情况下，您的所有 ng-repeat 范围都从父范围继承 display 属性。因此，当此属性发生变化时，它会反映在所有范围内。

尝试使用this 而不是$scope 来访问ng-repeat 的当前范围：

$scope.selected = function (value) {
     this.te = value;
     if (this.te == 3) {
         this.display = true;
     }        
};

【讨论】：