Javascript Angularjs中带有删除功能的动态下拉菜单

我正在尝试实现一个动态下拉列表，我希望它看起来像

单击下拉列表中的John可在下面添加John（也可将其存储在数组中）并将其从下拉列表中删除。从下面删除后，将其添加回下拉列表

由于John Mary Adam和Mike已经在下面（也在数组中），他们从下拉列表中删除（现在只有Julie保留在下拉列表中）。一旦从下面删除它们，它们就会添加回下拉列表。

---

有人能帮我在fiddle上实现AngularJS吗？

我觉得我对你前面问题的回答足够好，可以编辑。您只需

ng repeat

即可一次显示它们。下面是一个旧的示例：

姓名：{x.Name}}|ID:{{x.ID}}x


var-app=angular.module（'myApp'，[]）；
应用控制器（“HelloCntl”，HelloCntl）；
函数HelloCntl（$scope）{
$scope.friends=[{
id:1，
名字：“约翰”
},
{
id:2，
名字：“玛丽”
},
{
id:3，
名字：“迈克”
},
{
id:4，
名字：“亚当”
},
{
id:5，
名字：“朱莉”
}
];
$scope.selected=$scope.friends[0]；//初始化所选内容
$scope.delete=函数（x）{
变量y=$scope.friends.indexOf（x）；
$scope.friends.splice（y，1）；
}
var指数=6；
$scope.add=函数（x）{
$scope.friends.push({
id:索引，
姓名：x
});
索引++；
$scope.new_selected=''；
}
}

我认为我对你上一个问题的回答很好，可以编辑。您只需

ng repeat

即可一次显示它们。下面是一个旧的示例：

姓名：{x.Name}}|ID:{{x.ID}}x


var-app=angular.module（'myApp'，[]）；
应用控制器（“HelloCntl”，HelloCntl）；
函数HelloCntl（$scope）{
$scope.friends=[{
id:1，
名字：“约翰”
},
{
id:2，
名字：“玛丽”
},
{
id:3，
名字：“迈克”
},
{
id:4，
名字：“亚当”
},
{
id:5，
名字：“朱莉”
}
];
$scope.selected=$scope.friends[0]；//初始化所选内容
$scope.delete=函数（x）{
变量y=$scope.friends.indexOf（x）；
$scope.friends.splice（y，1）；
}
var指数=6；
$scope.add=函数（x）{
$scope.friends.push({
id:索引，
姓名：x
});
索引++；
$scope.new_selected=''；
}
}

让我们看看你做了什么far@Bart我加入了小提琴的链接，我在这方面太差了，我没有改进它，而是把它搞砸了。我不需要首先显示所有的项目，而是需要它使用类似于ng的东西，在添加项目时单击并附加下面的项目。比如说，如果最初我添加了John，它应该只显示John作为警报（并且在下拉列表中隐藏它），然后如果我单击Mary，它应该在John alert下面显示Mary alert（同时在下拉列表中隐藏Mary）。当警报被解除时，应将相应的警报添加到下拉列表中。向我们展示您所做的far@Bart我加入了小提琴的链接，我在这方面太差了，我没有改进它，而是把它搞砸了。我不需要首先显示所有的项目，而是需要它使用类似于ng的东西，在添加项目时单击并附加下面的项目。比如说，如果最初我添加了John，它应该只显示John作为警报（并且在下拉列表中隐藏它），然后如果我单击Mary，它应该在John alert下面显示Mary alert（同时在下拉列表中隐藏Mary）。解除警报后，应将相应的警报添加到下拉列表中。我在这方面做得太差了，不但没有改进，反而把事情搞砸了。我不需要首先显示所有的项目，而是需要它使用类似于ng的东西，在添加项目时单击并附加下面的项目。比如说，如果最初我添加了John，它应该只显示John作为警报（并且在下拉列表中隐藏它），然后如果我单击Mary，它应该在John alert下面显示Mary alert（同时在下拉列表中隐藏Mary）。解除警报后，应将相应的警报添加到下拉列表中。@dracarys3我已修复它，现在它应满足您的请求。如果一旦我选择了名称（需要

ng change=“add（…）”

），我就会在数组中添加名称（在下拉菜单下），读起来会更混乱，所以我只是添加了一个按钮，而我在这方面做得太差了，以至于我没有改进它，而是完全搞砸了。我不需要首先显示所有的项目，而是需要它使用类似于ng的东西，在添加项目时单击并附加下面的项目。比如说，如果最初我添加了John，它应该只显示John作为警报（并且在下拉列表中隐藏它），然后如果我单击Mary，它应该在John alert下面显示Mary alert（同时在下拉列表中隐藏Mary）。解除警报后，应将相应的警报添加到下拉列表中。@dracarys3我已修复它，现在它应满足您的请求。如果我在选择名称后（需要

ng change=“add（…）”

）将名称添加到数组中（在下拉列表下），阅读起来会更混乱，因此我只添加了一个按钮

function HelloCntl($scope) {
        $scope.friends = [
          {id:1,name: 'John'},
          {id:2,name: 'Mary'},
          {id:3,name: 'Mike'},
          {id:4,name: 'Adam'},
          {id:5,name: 'Julie'}
        ];
        $scope.selected = $scope.friends[0]; // initialise selection
        $scope.delete = function(x) {
          var y = $scope.friends.indexOf(x);
          $scope.friends.splice(y, 1);
        }
        var index = 6;
        $scope.add = function(x) {
          $scope.friends.push({
            id: index,
            name: x
          });
          index++;
          $scope.new_selected = '';
        }