选择框的角度不可变阵列

我的要求是有多个选择框具有相同的下拉列表（ng-options）数组，但是如果我在一个选择框中选择一个值，则应从其他选择框下拉列表中删除它。选择框的角度不可变阵列

在on change事件中，我试图创建一个新的数组，但不包括为第一个数组选择的项目。但它会从两个选择框中删除。就像一个不可变的DS总是返回一个原始的变异克隆。

上需要的建议是有可能实现这种方式还是有办法解决它

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    
 
    $scope.items = []; 
 
    $scope.selectedItem = { name: 'two', id: 27 }; 
 
    $scope.items = [{name: 'one', id: 30 },{ name: 'two', id: 27 },{ name: 'threex', id: 50 }]; 
 
    $scope.remove=function(data){ 
 
    $scope.items=$scope.items.filter(item=>{ 
 
      return item.name!==data.name; 
 
    }); 
 
    
 
});

<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 


    <select ng-model="selectedItem" ng-change="remove(selectedItem)" ng-options="item.name for item in items track by item.id"></select> 


    <select ng-model="selectedItem1" ng-options="item.name for item in items track by item.id"></select> 

    </body> 
</html>

$scope.remove=function(data){ 
    $scope.items=$scope.items.filter(item=>{ 
      return item.name!==data.name; 
    });

来源

2017-02-24 Vicky R

我建议在ng-options语法中使用过滤器管道。看一看plunker

<select ng-model="selectedItem1" ng-options="item.name for item in items | filter: coolFilter1"></select> 

     <select ng-model="selectedItem2" ng-options="item.name for item in items | filter: coolFilter2"></select>

来源

2017-02-24 13:58:26

只要你是在两个选择框中使用items，在012上进行更改数组将在两个选择框中反映出来。为选择框使用单独的数组，或者找到一种方法来过滤掉第一个选择框中的项目。例如，您可以在第一个选择框中的选定项目上设置selected=true，然后通过将筛选器!selected添加到ng-options，在第一个选择框中过滤掉items。这样你可以在两个盒子上使用相同的items阵列。

来源

2017-02-24 12:28:31 eminlala

当您使用ES6箭头功能时，您不需要写'返回'。

$scope.items=$scope.items.filter(item => item.name !== data.name);

这$scope.items=$scope.items.filter重新分配看起来奇怪..这将是最好不要改变源对象。

您可以给$ scope.items中的每个对象一个布尔值，然后在视图中对其进行过滤。

ng-options="item.name for item in items track by item.id | filter:{'isUsed': false}"

来源

2017-02-24 13:50:58 stackoverYC

选择框的角度不可变阵列

回答

相关问题