Question

目前正在学习Angular.js并诚实地与之斗争......我目前正在研究一组简单的下拉菜单，并显示相同的选项。我想要实现的是......让我们说有人选择“简”。我希望它在以下下拉列表中删除“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'}

];

}

我已经看到这个示例在其他演示中工作，但对我来说它似乎没有起作用......对可能的解决方案非常好奇。再次感谢！

Answer 1

我使用Angular1根据您的代码制作了fiddle。

<div ng-app="MyApp">

我想建议使用＆＃39; ng-app＆＃39;而不是＆＃39; ng：app＆＃39;如果你可以使用Angular1。

通过引用我的小提琴，您可以看到您的代码运作良好。：）

可以获得有关＆＃39; ng-app＆＃39;的更多信息。通过这个link. (document of angularjs-ngApp directive)

Answer 2

您忘记在HTML中加载AngularJS。把它放在favicon <link>下方

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

完全可原谅，我自己发现错误花了很多时间！

Angular.js下拉列表，在另一个下拉列表中选择相同选项时删除选项

2 个答案: