Question

简单的问题，但我不确定如何解决。

我有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做到这一点？

Answer 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>

ng-repeat内的ng-options删除已选择的选项值

1 个答案: