Question

我正在研究一对内容相互关联的组合。

HTML

 <span>{{lblRegion}}</span>
  <select ng-model="currentRegion" 
          ng-options="region.name for region in regions" 
          ng-change="checkAll()">
  </select>


  <span>{{lblCountry}}</span>
  <select ng-model="currentCountry"
          ng-options="country.name for country in currentRegion.countries"
          ng-disabled="currentRegion.id===0">
  </select>

JS

$scope.regions = regions;
  $scope.currentRegion = regions[0];
  $scope.currentCountry = $scope.currentRegion.countries[0];

  $scope.checkAll = function() {

    if (currentRegion.id !== 0) {
      $scope.test = true;
    } else {
      $scope.test = false;
    }
  }

 var regions = [{
    'id': 0,
    'name': 'All',
    'countries': [{
      'id': '0',
      'name': 'All'

    }]
  },
  ...

行为必须实现这一点：

两个组合都有“全部”选项。
'region'组合的内容设置'country'组合的可能值。
如果区域组合设置为“全部”，则国家/地区组合将被禁用，其内容为“全部”选项。

我想摆脱始终出现在国家/地区组合中的空默认选项。我已经读过ng-init可以完成这项工作，但ng-init docs声明不应该以这种方式管理此问题。

如何删除空选项？

Answer 1

深写$watch：

$scope.$watch(function () {
    return $scope.currentRegion;
},
function (newValue, oldValue) {
    $scope.currentCountry = newValue.countries[0].name;
}, true);

演示 Plunker

Answer 2

默认的空白值已被选中，因为第二个ng-option取决于currentCountry.countries，后者发生了变化，currentRegion的值取决于{{ 1}}，此列表中没有。只要regions[0].countries[0]发生更改，就可以通过将currentRegion的值设置为currentRegion.countries[0]来更正此问题。

这可以在currentRegion中完成，正如您所尝试的那样。

但是，我不相信ng-change和ng-change的排序。因此，我更愿意为这项任务设置监视：http://plnkr.co/edit/TnHC039Hg7x0Oj9DmEkk?p=preview

<强>控制器

ng-model

<强>模板

$scope.$watch('currentRegion', function (newVal) {
  if (typeof newVal !== 'undefined') {
    $scope.currentCountry = newVal.countries[0];
  }
})

Answer 3

摆脱空白的最快方法就是将以下内容添加到checkAll（）函数中：

$scope.currentCountry = $scope.currentRegion.countries[0];

像这样：

  $scope.checkAll = function() {
    $scope.currentCountry = $scope.currentRegion.countries[0];
    if (currentRegion.id !== 0) {
      $scope.test = true;
    } else {
      $scope.test = false;
    }
  }

如果没有为选择框设置值，则会自动添加空白的第一个项目。所以要避免这种情况，显然要给它一个价值。

如何摆脱依赖选择的默认值？

3 个答案: