代码之家 › 专栏 › 技术社区 › user9130953

ng repeat下拉列表,以限制多次选择相同的值

angularjs-ng-repeat angularjs javascript

user9130953 · 技术社区 · 7 年前

我在ng repeat中有一个下拉列表和一个add按钮,可以将新的下拉列表添加到列表中,正如我在JSFiddle中所示,我想限制第二个下拉列表,以选择第二个下拉列表中的第一个选定值。因此,不应允许在第一个下拉列表中选择或隐藏第一个下拉列表中选择的值。

在我以前的问题中,pankaj parkar给出了答案,但我无法将该答案集成到我的JSFIDLE中。

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>

2 回复 | 直到 7 年前

Munim Munna 7 年前

将您的选择纳入范围项目大堆从中获取输出结果选择大堆

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>

Yash 7 年前

您可以尝试此解决方案,该解决方案基于第一个选项的选定值,基于您可以更改的需求。

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>