javascript - AngularJS: ngRepeat for select on change ngOptions-list -

i have angularjs app, has select filled options arry, using ngoptions. every time user clicks button add one, ngrepeat directive generates new select @ bottom.

i want make sure user cannot select duplicate values.

so if list contains 3 items: item1, item2 , item3, , user selects item3 , presses button, last generated select list should contain items 'item1' , 'item2'. if user select 'item1' , presses button, user should see next select generated 'item2' option.

so generally, in case above, generated html should this:

<div data-ng-repeat="item in selectedoptions">   <select>     <option value="1">item1</option>     <option value="2">item2</option>     <option value="3">item3</option>   </select>   <select>   <option value="1">item1</option>   <option value="2">item2</option>  </select>   <select>   <option value="2">item2</option>  </select> </div>  

keep in mind: user keep seeing 3 of selects, once every option available, once 2 options available, , once 1 option available.

i've been thinking of lot of ways make work, far haven't had luck. know of pattern can use in angular achieve behavior?

this i've tried far.

<div data-ng-repeat="function in item.functions">     <select data-ng-model="function.id" data-ng-options="j.id j.name j in getcorrectfunctions(functionslist)">         <option selected="selected" value="">---</option>      </select>       <a data-ng-click="addfunction()">         <i class="fa fa-plus fa-plus-lower"></i>      </a> </div> 

and in directive code have following function:

  function getcorrectfunctions(functionlist) {                 var item = scope.item;                  var list = functionlist.slice();                  //excluded brevity: loop remove every item wasn't available anymore                  return list;             } 

i thought executed once every item in list, not seem case. don't think applying filter different, it?

here's 1 take on this. not have support dynamically adding new functions, prevent user selecting given item twice.

see plunker working example , more details.

first angular setup part. here i've defined mock array of function objects ($scope.functions) , array user made selections ($scope.selected)

var app = angular.module('app', []);  app.controller('selectctrl', function ($scope) {   $scope.functions = [     {id: 1, name: 'first'},     {id: 2, name: 'second'},     {id: 3, name: 'third'},   ];   $scope.selected = [];    $scope.selectedfilter = function (selectnumber) {     // snipped   }; }); 

in html, showing 1 select, similar approach used 3 selects: set selected value selected array in given index (0 case shown below), , use selectedfilter filter functions same index value.

  <select ng-options="j.id j.name j in functions | filter:selectedfilter(0)" ng-model="selected[0]">     <option value="" selected="selected">---</option>   </select> 

then filtering function. returns true unselected functions and selected function of given select.

  $scope.selectedfilter = function (selectnumber) {     return function (func) {       if ($scope.selected.length === 0) {         return true;       } else {         var unselectedfunctions = _.filter($scope.functions, function (fn) {           return _.findindex($scope.selected, function (sel) {             return fn.id === sel;           }) === -1;         });         var selectedforcurrentid = $scope.selected[selectnumber];         var selectedforcurrent = _.find($scope.functions, {id: selectedforcurrentid});         return func === selectedforcurrent || _.findindex(unselectedfunctions, {id: func.id}) > -1;       }     };   }; 

here i've used lodash nice helper functions. not affiliated lodash in way, suggest take @ it, or other similar library.

hopefully helps things moving on!