目前正在学习 Angular.js，老实说，我为此苦苦挣扎......我目前正在研究一组简单的下拉菜单，其中显示了相同的选项。我想要实现的目标是……比方说有人选择了“Jane”。我希望它在以下下拉列表中删除“Jane”。我设置了代码，但问题是选项没有显示，实际上什么也没有发生。我在名为 index.html 的文件中有表单，而 Javascript 在名为 app.js 的文件中。该应用程序在本地运行，所有 Angular 文件都是使用 npm 提取的，而不是使用 CDN。
我将在堆栈中显示这里的代码。感谢您提供任何帮助，并在此先感谢您!
这是 index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="app.js"></script>
</head>
<body>
<div ng:app>
<div ng-controller="HelloCntl">
<select ng-model="selectname1"
ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select -</option></select>
<div>{{selectname1}}</div>
<select ng-model="selectname2"
ng-options="item as item.name for item in friends|filter:filter1|filter:filter3" ><option value="">- select -</option></select>
<div>{{selectname2}}</div>
<select ng-model="selectname3" ng-options="item as item.name for item in
friends|filter:filter1|filter:filter2" ><option value="">- select -</option>
</select>
<div>{{selectname3}}</div>
</div>
</div>
</body>
</html>
和 app.js 代码:
function HelloCntl($scope) {
$scope.selectname1={};
$scope.selectname2={};
$scope.selectname3={};
$scope.filter1 = function(item){
return (!($scope.selectname1&&$scope.selectname1.id)||item.id !=$scope.selectname1.id);
};
$scope.filter2 = function(item){
return (!($scope.selectname2&&$scope.selectname2.id)||item.id!=$scope.selectname2.id);
};
$scope.filter3 = function(item){
return (!($scope.selectname3&&$scope.selectname3.id)||item.id !=$scope.selectname3.id);
};
$scope.friends = [
{
id:1,name: 'John',
phone: '555-1276'},
{
id:2,name: 'Mary',
phone: '800-BIG-MARY'},
{
id:3,name: 'Mike',
phone: '555-4321'},
{
id:4,name: 'Adam',
phone: '555-5678'},
{
id:5,name: 'Julie',
phone: '555-8765'}
];
}
我在其他演示中看到过这个示例，但对我来说它似乎不起作用...对可能的解决方案非常好奇。再次感谢!
最佳答案
我做了一个 fiddle基于您使用 Angular1 的代码。
<div ng-app="MyApp">
如果您可以使用 Angular1，我建议您使用“ng-app”而不是“ng:app”。
引用我的fiddle，你可以看到你的代码运行良好。 :)
并且可以通过这个link. (document of angularjs-ngApp directive)获得更多关于'ng-app'的信息
关于javascript - 在另一个下拉列表中选择相同选项时删除选项的 Angular.js 下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47541485/