Динамически сгенерировать опции меню выбора для каждого невыбранного элемента в массиве

Question

У меня есть поле опций, в котором я использую, чтобы добавить «часы», и это поле удваивается, когда я хочу добавить другие «часы», и мне нужно работать следующим образом:

Option Field 1: [0:00, 1:00, 2:00, 3:00, 5:00] 

Я выбираю radio field = 1 [3:00]

и когда я добавить еще один вариант поле с «часов» Мне нужно выбежать значение, которое уже выбран в первом и так далее.

Option Field 2: [0:00, 1:00, 2:00, 5:00] 

Мой HTML является:

<select type="text" name="product[portion]" ng-model="formAddProduct.portions[i].label"> 
    <option value=""> Portion </option> 
    <option ng-repeat="(portion_name, v) in cat.portions" ng-if="v == true">  
    {{portion_name}} 
    </option> 
</select> 

Я изменил "часть" за "часов", чтобы проще объяснить

Answer 1

Вот один способ, которым Вы могли бы это сделать. Live demo (click here.)

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <div>Selected: {{selected}}</div> 
    <div>Available: {{notSelectedHours()}}</div> 
    <div ng-repeat="item in selects() track by $index"> 
    <select ng-model="selected[$index]" ng-options="hour for hour in notSelectedHours($index)"></select> 
    </div> 
    <button ng-click="reset()">Reset</button> 
</div> 

angular.module('myApp', []) 
.controller('MyCtrl', function($scope) { 
    $scope.hours = ["0:00", "1:00", "2:00", "3:00", "4:00", "5:00"]; 
    $scope.selected = []; 
    $scope.selects = function() { 
    // automatically adjust the length of the ng-repeat to match available hours 
    return new Array(Math.min($scope.hours.length, $scope.selected.length+1)); 
    }; 
    $scope.notSelectedHours = function($index) { 
    return $scope.hours.filter(function(item) { 
     // keep items that haven't been selected 
     if ($scope.selected.indexOf(item) === -1) { 
     return item; 
     } 
     // keep item that is selected in this repeat 
     if (item === $scope.selected[$index]) { 
     return item; 
     } 
    }); 
    }; 
    $scope.reset = function() { 
    $scope.selected = []; 
    }; 
});