Question

我的要求是让多个选择框具有相同的下拉列表（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="angular.js@1.3.15" 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;
    });

Answer 1

我建议在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>

Answer 2

只要您在两个选择框中都使用items，items数组上的更改就会反映在两个选择框中。要么为选择框使用单独的数组，要么找到从第一个选择框中过滤掉项目的方法。例如，您可以在第一个选择框中的所选项目上设置selected=true，然后通过向items添加过滤器!selected，在第一个选择框中过滤掉ng-options。这样，您可以在两个框上使用相同的items数组。

Answer 3

使用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}"

选择框的角度不可变数组

3 个答案: