AngularJS 当第一个下拉菜单更改时,第二个下拉菜单不更新
AngularJS second dropdown does not update when first dropdown changes
我正在创建一个搜索页面,用户可以在其中使用第一个下拉列表中列出的预先 selected 搜索条件搜索数据。在下面的示例中,这些条件是 'First Name'、'Country' 和 'Nationality'.
当用户 select 的国家或国籍时,第二个下拉列表出现在 select countries/nationalities 之一。为了填充这个下拉列表,我使用 ng-options 和一个内部变量,该变量指向控制器中定义的字符串。
但是当这两个选项之一被 selected 并且您想切换到另一个时,第二个下拉列表不会更新。 ngOptions 中的值确实在 HTML 中得到更新,只是下拉列表中的数据没有。
当你 select 'First Name' 之间没有问题。有谁知道我可以使用什么来更新第二个下拉列表中的值?
下面是我的代码和一个有效的 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="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>
这是一个简单的修复方法,您只需要一个变量,它可以在您每次切换时从第二个下拉列表中退出。 dom 需要一些东西来强制它刷新,因为没有 scope.$apply
发生。
试试这个:
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>
我正在创建一个搜索页面,用户可以在其中使用第一个下拉列表中列出的预先 selected 搜索条件搜索数据。在下面的示例中,这些条件是 'First Name'、'Country' 和 'Nationality'.
当用户 select 的国家或国籍时,第二个下拉列表出现在 select countries/nationalities 之一。为了填充这个下拉列表,我使用 ng-options 和一个内部变量,该变量指向控制器中定义的字符串。
但是当这两个选项之一被 selected 并且您想切换到另一个时,第二个下拉列表不会更新。 ngOptions 中的值确实在 HTML 中得到更新,只是下拉列表中的数据没有。
当你 select 'First Name' 之间没有问题。有谁知道我可以使用什么来更新第二个下拉列表中的值?
下面是我的代码和一个有效的 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="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>
这是一个简单的修复方法,您只需要一个变量,它可以在您每次切换时从第二个下拉列表中退出。 dom 需要一些东西来强制它刷新,因为没有 scope.$apply
发生。
试试这个:
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>