ng-repeat 下拉限制多次选择相同的值

Question

我在 ng-repeat 中有一个下拉菜单和一个添加按钮，可以将新的下拉菜单添加到列表中，如我在 JSFiddle 中所示，我想将第二个下拉菜单限制为 select 第二个下拉列表中的第一个 selected 值。因此，第一个下拉列表中的值 select 不应允许在第二个下拉列表中 select 或隐藏该值。

在我的旧问题 pankaj parkar 中给出了答案，但我无法将该答案整合到我的 JSFiddle 中。

ng-repeat="post in posts | filter: { type: selectedValue }"

请帮我解决这个问题。

This is my old question

My JSFiddle.

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {
  
  $scope.names = ['Mobile','Office','Home'];

  $scope.choices = [{id: 'choice1'}];
  
  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset ng-model='y' ng-repeat="choice in choices">
      <select>
         <option ng-model='x1' ng-repeat = "x in names">{{x}}</option>
      </select>
   </fieldset>
   <button class="addfields" ng-click="addNewChoice()">Add fields</button>
</div>

Answer 1

将您的选项放入范围 items 数组中。从 choices 数组中获取输出结果。

var app = angular.module('angularjs-starter', []);

app.filter("itemFilter", function(){
  return function(items, choice){
    filtered_items=[];
    for(var i=0;i<items.length;i++){
      if(items[i].choiceID==null || items[i].TYPE_ID==choice.TYPE_ID)
        filtered_items.push(items[i]);
    }
    return filtered_items;
  }
});

app.controller('MainCtrl', function($scope) {
  
  $scope.items = [
     {"TYPE_ID":1,"TYPE_NAME":"Jpeg"},
     {"TYPE_ID":2,"TYPE_NAME":"Odt"},
     {"TYPE_ID":3,"TYPE_NAME":"docx"},
     {"TYPE_ID":4,"TYPE_NAME":"xls"}
  ];

  $scope.choices = [];
  
  $scope.addNewChoice = function() {
    var newChoiceID = 'choice'+$scope.choices.length+1;
    for(var i=0;i<$scope.items.length;i++){
     if($scope.items[i].choiceID==null){
       $scope.items[i].choiceID = newChoiceID;
 $scope.choices.push({'id':newChoiceID,TYPE_ID:$scope.items[i].TYPE_ID});
        break;
      }
    }
  };

  $scope.updateValue = function(choice) {
    for(var i=0;i<$scope.items.length;i++){
     if($scope.items[i].choiceID==choice.id)
       $scope.items[i].choiceID = null;
     if($scope.items[i].TYPE_ID==choice.TYPE_ID)
       $scope.items[i].choiceID = choice.id;
    }
  };
  
  $scope.addNewChoice();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset ng-repeat="choice in choices">
      <select ng-model="choice.TYPE_ID" ng-change="updateValue(choice)">
         <option ng-repeat = "item in items | itemFilter:choice" value="{{item.TYPE_ID}}">{{item.TYPE_NAME}}</option>
      </select>
   </fieldset>
   <button class="addfields" ng-show="items.length>choices.length" ng-click="addNewChoice()">Add fields</button>
   <h4>Data for backend</h4>
   <ul>
     <li ng-repeat="choice in choices">TYPE_ID: {{choice.TYPE_ID}}</li>
   </ul>
</div>

Answer 2

您可以试试这个解决方案，它基于第一个选项选择的值，您可以根据需要更改它。

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {
  
  $scope.names = ['Mobile','Office','Home'];
  $scope.selectedValue = [];
  $scope.choices = [{id: 'choice1', options: $scope.names}];
  
  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;

    // First Frame options list
    var ele = document.getElementById('myOptions');
   var angularEle = angular.element( ele );
        
    var value = angularEle[0].value;
    $scope.selectedValue = $scope.names.filter(item => item !== value)
   
    $scope.choices.push({'id':'choice'+newItemNo, options: $scope.selectedValue});
  };
  
});

.addfields {
    -webkit-appearance: button;
    cursor: pointer;
   color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div id='mainC' ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset ng-model='y' ng-repeat="choise in choices">
 <p> <ul>Id, Options
  <li ng-repeat="(k,v) in choise">{{v}}</li>
 </ul></p>
    
 <select id='myOptions'>
      <option ng-model='x1' ng-repeat = "x in choise.options">{{x}}</option>
   </select>
   </fieldset>
   <button class="addfields" ng-click="addNewChoice()">Add fields</button>
</div>

ng-repeat 下拉限制多次选择相同的值

ng-repeat Drop-down to restrict selecting same value multiple times

javascript

angularjs

angularjs-ng-repeat