当第一个下拉列表更改时，AngularJS 第二个下拉列表不会更新答案

【问题标题】：AngularJS second dropdown does not update when first dropdown changes当第一个下拉列表更改时，AngularJS 第二个下拉列表不会更新
【发布时间】：2018-01-17 21:04:06
【问题描述】：

我正在创建一个搜索页面，用户可以在其中使用第一个下拉列表中列出的预选搜索条件搜索数据。在下面的示例中，这些条件是“名字”、“国家”和“国籍”。

当用户选择国家/地区时，会出现第二个下拉菜单以选择其中一个国家/地区。为了填充这个下拉列表，我使用 ng-options 和一个变量，该变量指向控制器中定义的字符串。

但是，当您选择了这两个选项之一并且您想切换到另一个时，第二个下拉菜单不会更新。 ngOptions 中的值确实会在 HTML 中更新，只是下拉列表中的数据没有。

当您在两者之间选择“名字”时，没有问题。有谁知道我可以使用什么来更新第二个下拉列表中的值？

下面是我的代码和一个工作的插件：http://plnkr.co/edit/LYpOdoLpgiMeHxlGzmub?p=preview

var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
  
    var vm = this;
    
    vm.search = {id:0, criteria: {}, value: ''};
    
    vm.referenceData = {
      countries: [
        {COUNTRY_ID:1, COUNTRY_NAME: 'UNITED KINGDOM'},
        {COUNTRY_ID:2, COUNTRY_NAME: 'AUSTRALIA'},
        {COUNTRY_ID:3, COUNTRY_NAME: 'SOUTH AFRICA'},
        {COUNTRY_ID:4, COUNTRY_NAME: 'NETHERLANDS'},  
      ],
      nationalities: [
        {NATIONALITY_ID: 1, NATIONALITY_NAME: "BRITISH"},
        {NATIONALITY_ID: 2, NATIONALITY_NAME: "AUSTRALIAN"},
        {NATIONALITY_ID: 3, NATIONALITY_NAME: "SOUTH AFRICAN"},
        {NATIONALITY_ID: 4, NATIONALITY_NAME: "DUTCH"},  
        ]
    };
    
    vm.criteriaList = [
        { name: 'First Name', key: 'FIRST_NAME'},
        { name: 'Country', key: 'COUNTRY_ID', options:'o.COUNTRY_ID as o.COUNTRY_NAME for o in ctrl.referenceData.countries' },
        { name: 'Nationality', key: 'NATIONALITY', options:'o.NATIONALITY_ID as o.NATIONALITY_NAME for o in ctrl.referenceData.nationalities' }
    ];
});

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="SomeController as ctrl">


  <p>Criteria:</p>
  <select ng-model="search.criteria" ng-change="search.value = ''" ng-options="criteria as criteria.name for criteria in ctrl.criteriaList">
    <option value="">- Select Criteria -</option>
  </select>
  
  
  <p>Value:</p>
  <!-- TEXT INPUT -->
  <input type="text" ng-model="search.value" placeholder="Search Value" ng-if="!search.criteria.options" />
  <!-- DROPDOWN INPUT -->
  <select ng-model="search.value" ng-if="search.criteria.options" ng-options="{{search.criteria.options}}"></select>

</html>

【问题讨论】：

是我第一次在 ng-options 中看到表达式，我看到了 plnkr，我很担心为什么不刷新。可能原因是 ng-options 不处理绑定数据。也许用一个指令可以解决，强制刷新组件。
一个非优雅的解决方案是处理两个下拉列表，一个用于国籍，另一个用于城市。我知道那不是你要找的。span>
这是一个带有指令的解决方案，就像我说的 stackoverflow.com/a/27857228/8303694

标签： angularjs dropdown ng-options angularjs-ng-options

【解决方案1】：

这是一个简单的解决方法，您只需要一个变量，每次切换时都可以在第二个下拉列表中显示。由于没有发生scope.$apply，因此 dom 需要一些东西来强制它刷新。

Plunker Working

试试这个：

var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope, $timeout) {

    var vm = this;
    vm.somVal = false; ///ADD THIS
    vm.search = {id:0, criteria: {}, value: ''};

    vm.triggerSomeVal = function(){ ///ADD THIS
      vm.someVal = true;
      $timeout(function(){vm.someVal = false}, 100)
    };

    vm.referenceData = {
      countries: [
        {COUNTRY_ID:1, COUNTRY_NAME: 'UNITED KINGDOM'},
        {COUNTRY_ID:2, COUNTRY_NAME: 'AUSTRALIA'},
        {COUNTRY_ID:3, COUNTRY_NAME: 'SOUTH AFRICA'},
        {COUNTRY_ID:4, COUNTRY_NAME: 'NETHERLANDS'},  
      ],
      nationalities: [
        {NATIONALITY_ID: 1, NATIONALITY_NAME: "BRITISH"},
        {NATIONALITY_ID: 2, NATIONALITY_NAME: "AUSTRALIAN"},
        {NATIONALITY_ID: 3, NATIONALITY_NAME: "SOUTH AFRICAN"},
        {NATIONALITY_ID: 4, NATIONALITY_NAME: "DUTCH"},  
        ]
    };

    vm.criteriaList = [
        { name: 'First Name', key: 'FIRST_NAME'},
        { name: 'Country', key: 'COUNTRY_ID', options:'o.COUNTRY_ID as o.COUNTRY_NAME for o in ctrl.referenceData.countries' },
        { name: 'Nationality', key: 'NATIONALITY', options:'o.NATIONALITY_ID as o.NATIONALITY_NAME for o in ctrl.referenceData.nationalities' }
    ];
});

<p>Criteria:</p>
  <select ng-model="search.criteria" ng-change="search.value = ''; ctrl.triggerSomeVal()" ng-options="criteria as criteria.name for criteria in ctrl.criteriaList">
    <option value="">- Select Criteria -</option>
  </select>


  <p>Value:</p>
  <!-- TEXT INPUT -->
  <input type="text" ng-model="search.value" placeholder="Search Value" ng-if="!search.criteria.options" />
  <!-- DROPDOWN INPUT ADD !someVal-->
  <select ng-model="search.value" ng-if="search.criteria.options && !ctrl.someVal" ng-options="{{search.criteria.options}}"></select>

【讨论】：

你测试解决方案吗？我复制代码，它不起作用。
现在应该可以了。我忘了将 $timeout 添加到控制器和 ctrl 上下文到 html。
您也可以将超时时间更改为 100，这样非常快
是的，这似乎可以解决问题:) 非常感谢！答案已标记