Question

我在ng-repeat中有一个下拉列表和一个添加按钮，可以像我在JSFiddle中显示的那样添加新的下拉列表，我想限制第二个下拉列表选择第一个第二个下拉列表中的选定值。因此，不应允许在第一个下拉列表中选择的值在第二个下拉列表中选择或隐藏该值。

在我的老问题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

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

＆＃13;

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();
});

＆＃13;

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

＆＃13;

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下拉以限制多次选择相同的值

2 个答案: