當第一次下拉式更改時，AngularJS第二次下拉列表不會更新

我正在創建一個搜索頁面，用戶可以使用第一個下拉列表中列出的預先選擇的搜索條件搜索數據。在下面的例子中，這些標準是'名字'，'國家'和'國籍'。當第一次下拉式更改時，AngularJS第二次下拉列表不會更新

當用戶選擇國家或國籍時，第二個下拉菜單顯示爲選擇其中一個國家/國籍。爲了填充這個下拉列表，我使用了帶有一個變量的ng-options指向控制器中定義的字符串。

但是，如果選擇了這兩個選項中的一個，並且您想切換到另一個，則第二個下拉列表不會更新。 ngOptions中的值在HTML中得到更新，只是下拉列表中的數據不是。

當您選擇「名字」之間沒有問題。有誰知道我可以使用什麼，以便第二個下拉列表中的值得到更新？

下面是我的代碼和工作plunker：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="[email protected]" 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>

來源

2017-08-09 Olafvv

是我第一次看到裏面NG選項的表情，我看到plnkr和IM有關方面爲什麼不刷新。也許是因爲ng-options沒有處理那些可怕的bindig數據。也許有一個指令可以解決，強制刷新組件。 –

一個非優雅的解決方案是處理兩個下拉菜單之一，用於國籍和其他城市。我知道那不是你正在尋找的。 –

這裏是一個解決方案，像我說的https://stackoverflow.com/a/27857228/8303694 –

這是一個簡單的辦法，你只需要能夠若出第二個下拉每次您切換的變量。因爲沒有發生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>

來源

2017-08-09 20:24:11 Ohjay44

您是否測試解決方案？我複製代碼，它不起作用。 –

堅持我有一個修復對不起，我有一個錯誤 – Ohjay44

現在應該工作。我忘了將$超時添加到控制器並將Ctrl上下文添加到html。 – Ohjay44

當第一次下拉式更改時，AngularJS第二次下拉列表不會更新

回答

相關問題