Question

我目前在页面上有2个列表，所有可用选项的总列表以及选定的选项列表。

从所有可用选项中选择一个选项并将其添加到我选择的选项列表时，我希望所选的选项隐藏在所有可用选项的选择列表中，而不是删除但隐藏。

以下是我制作的一些代码的链接，其中包含页面的基础知识，但不包含有关隐藏的部分，非常感谢java脚本或角度解决方案。

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js" integrity="sha256-+f0njwC9E3IT9zDPry5DSIcGdSxQYezBaStQ4L0ZRfU=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <h1>Page header</h1>
    <div class="list-group">
      <div class="list-group-item" ng-show="!selectedWords.length">
        <i>No selected words</i>
      </div>
      <div ng-repeat="word in selectedWords" class="list-group-item">{{word}}</div>
    </div>
    <div class="input-group">
      <select ng-model="selectedWord" class="form-control" required="required">
        <option ng-repeat="word in allWords" value="{{word}}">{{word}}</option>
      </select>
      <span class="input-group-btn">
          <button class="btn btn-default" type="button" ng-click="addWord()">Add</button>
        </span>
    </div>
  </div>
</body>

</html>

JS file:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.allWords = ["Banana", "Orange", "Apple", "Mango"];
  $scope.selectedWords = [];
  $scope.addWord = function() {
    $scope.selectedWords.push($scope.selectedWord);
  }
});

Answer 1

您可以采用的方法是使用自定义过滤器：

请注意，此解决方案不会修改allWords数组，它只是根据selectedWords数组的状态限制（在视图上）哪些是可见的，这会使项目重新添加进入列表就像从selectedWords数组中删除单词一样简单。

更新 - 添加了removeWord（）功能（还包括用于删除字图标的字体真棒图标库）

更新2 - 在页面加载时从json文件加载selectedWords

<强> Working DEMO

＆＃13;

var app = angular.module('myApp', []);
app.filter("unselectedWords", function() {
  return function(list, selectedWords) {
    var unselectedWords = list.slice().filter(function(elem) {
      return selectedWords.indexOf(elem) === -1;
    });
    return unselectedWords;
  };
});
app.controller('myCtrl', function($scope) {
  $scope.allWords = ["Banana", "Orange", "Apple", "Mango"];
  $scope.selectedWords = [];
  $scope.addWord = function(word) {
    if (word != undefined && word !== "" && $scope.selectedWords.indexOf(word) === -1) {
      $scope.selectedWords.push(word);
    }
  };
  $scope.removeWord = function (word) {
    $scope.selectedWords.splice($scope.selectedWords.indexOf(word), 1);
  };
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <h1>Page header</h1>
    <div class="list-group">
      <div class="list-group-item" ng-show="!selectedWords.length">
        <i>No selected words</i>
      </div>
      <div ng-repeat="word in selectedWords" class="list-group-item">{{word}} 
         <span style="position: absolute; right: 10px; top: 12px; cursor: pointer;" 
            ng-click="removeWord(word)" title="Remove Word">
               <i class="fa fa-times fa-lg" style="color: red"></i>
         </span>
      </div>
    </div>
    <div class="input-group">
      <select ng-model="selectedWord" class="form-control" required="required">
        <option ng-repeat="word in allWords | unselectedWords:selectedWords" value="{{word}}">{{word}}</option>
      </select>
      <span class="input-group-btn">
          <button class="btn btn-default" type="button" ng-click="addWord(selectedWord)">Add</button>
        </span>
    </div>
  </div>
</body>

＆＃13;

Answer 2

以下是一种方式：http://plnkr.co/edit/uCrU28z7WzkopNlx2LlK?p=preview

通过将select的值设置为索引而不是值来更改标记：

<option ng-repeat="word in allWords" value="{{$index}}">{{word}}</option>

这样，当你想从列表中删除单词时，你不必使用字符串比较来搜索它：

  $scope.addWord = function() {
    $scope.selectedWords.push($scope.allWords[$scope.selectedWord]);
    removeWord($scope.selectedWord);
  };

  function removeWord(index) {
    $scope.allWords.splice(index,1);
  }

如何隐藏另一个集合中存在的选择选项

2 个答案: