ng-repeat 中的 ng-options 删除已选择的选项值答案

【问题标题】：ng-options inside ng-repeat removing already selected values of optionsng-repeat 中的 ng-options 删除已选择的选项值
【发布时间】：2019-07-20 01:59:20
【问题描述】：

简单的问题，但我不知道如何解决。

我有 ng-repeat 使用相同值的 ng-options 动态创建选择框

我有 ng-repeat，即迭代模型选项。

<div data-ng-repeat="condition in model.conditions">
    <label>{{condition}}</label>
    <select data-ng-model="selectedValue"
            ng-options="item.name for item in optionList">
    </select>
</div>

这是条件模型：

$scope.model = 
    {
        conditions:
        [
            {id:1,name:"CONDITION_ONE"},
            {id:2,name:"CONDITION_TWO"}
        ]
    }

这是 optionList 项：

$scope.optionList = 
    [
        {id:1, name:"OPTION_ONE"},
        {id:2, name:"OPTION_TWO"},
        {id:3, name:"OPTION_Three"}
    ];

仅为说明性图片：

我想要做的是，当从上面的选择框中选择一个项目时，我想从下面的选择框中删除这个项目，因此，通过删除已经选择的项目来防止重复项目。

有什么方法可以使用 angularJS 做到这一点吗？

【问题讨论】：

每次用户选择一个值时，从选项列表中删除选项Array.filter()。如果您还需要原件，只需在开始时克隆它，这样您就有一个要渲染的过滤副本和一个包含所有可能选项的主副本。

标签： javascript angularjs

【解决方案1】：

在 ng-repeat 中使用过滤器

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div data-ng-repeat="condition in model.conditions">
    <label>Remove Id {{condition.id}} from  List </label>
<select ng-model="selectedName" ng-options="item.name for item in filter(condition)">
</select>

</div></div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.optionList = 
    [
        {id:1, name:"OPTION_ONE"},
        {id:2, name:"OPTION_TWO"},
        {id:3, name:"OPTION_Three"}
    ];
    
    $scope.model = 
    {
        videos:
        [
            {id:1,name:"CONDITION_ONE"},
            {id:2,name:"CONDITION_TWO"}
        ],
        conditions : [
        {id:1, name:"OPTION_ONE"},
        {id:2, name:"OPTION_TWO"},
        {id:3, name:"OPTION_Three"}
    ]
    };
    
    $scope.filter = (item)=>{
   		return $scope.optionList.filter(list => list.id !== item.id);
    }
});
</script>

</body>
</html>

【讨论】：