Angularjs 两个 select 盒子连接到一个模型对象 - selected 选项

Question

我有两个 select 盒子连接到同一个对象的问题。我创建了一个 plunker，但它在那里很好，但在我的应用程序中却不行。基本上，我将所有内容从我的代码复制到 plunker，它在那里工作，但不在我的代码中。这是 link：plnkr

    app.controller('MainCtrl', function($scope) {
      $scope.consoleLog = '';
      $scope.sites = [
{name: 'site1', id: 001, datasources:[
  {name: 'one', id: 441},
  {name: 'two', id: 442},
  {name: 'three', id: 443}
]},
{name: 'site2', id: 002, datasources:[
  {name: 'four', id: 444},
  {name: 'five', id: 445},
  {name: 'six', id: 446},
  {name: 'seven', id: 447}
]}];

$scope.selectedSiteIndx = 0;
$scope.selectedSite = $scope.sites[$scope.selectedSiteIndx].id;
$scope.selectedDs = $scope.sites[$scope.selectedSiteIndx].datasources[0].id;

$scope.selectedSiteChanged = function (selectedSite){
    var siteIndx = $scope.sites.map(function(e){return e.id}).indexOf(selectedSite);
    $scope.selectedDs = $scope.sites[siteIndx].datasources[0].id; 
    $scope.selectedSite = selectedSite;
    $scope.selectedSiteIndx = siteIndx;
};
$scope.selectedDsChanged = function(selDs){
    $scope.selectedDs = selDs;
    $scope.consoleLog += 'selected:'+selDs+', ';
};
    });

我那里有两个 select 盒子。首先是站点 selection。第二个是数据源 selection。当您 select 第一个框中的网站比第二个 select 框将其列表更改为来自新对象的嵌套数据源。它工作正常，没有问题。您可以更改站点，新数据将填充到第二个框中。我想要一个默认的 selected（第一个选项可用）。因此，当您 select 站点时，站点的第一个数据源将被自动 selected。我的应用程序中的问题（由于某种原因不在 plnkr 中）是当我 select 来自 box2 的不同数据源然后更改第一个框中的站点时。默认的第一个选项不会自动 selected。在我更改数据源之前，我可以多次更改站点，并且数据源框 2 中的第一个选项总是 selected。但是一旦我触摸数据源框，它就会停止。正如我所说，您在 plnkr 上看不到。我还注意到，当我更改站点时，数据源更改事件侦听器是用数据源 Id = null 触发的。但这只是在我触摸 2 号框后发生的

知道为什么吗？我已经尝试了很多不同的选项，selected 等。不能让它工作。我只想让第一个选项始终可用 selected.

Answer 1

直到你不知道为什么这在你的应用程序中不起作用而在 plunker 中起作用。

我只是想给你一个更简洁的方法来完成同样的工作......最终可能会解决你的问题。

第一次在工作中看到它 plunker

我只是使用整个对象而不是使用索引（那真的很混乱）

<select ng-options="site as site.name for site in sites"
   ng-model="selectedSite" ng-change="selectedDs = selectedSite.datasources[0]"></select>
<select ng-options="ds as ds.name for ds in selectedSite.datasources"
   ng-model="selectedDs"></select>

请注意，这是 site as 和 ds as 而不是 site.id 和 ds.id。

我也在selectedSite.datasources

中直接使用了你模型值的子集合

在控制器中我只是初始化值

$scope.selectedSite = $scope.sites[0];
$scope.selectedDs = $scope.selectedSite.datasources[0];

我在第一个输入上也有这个 ng-change

ng-change="selectedDs = selectedSite.datasources[0]"

希望它神奇地解决了您的问题。

Angularjs 两个 select 盒子连接到一个模型对象 - selected 选项

Angularjs two select boxes connected to one model objects - selected option

javascript

angularjs

angularjs-ng-options

angularjs-ng-change