为数组中每个未 select 编辑的项目动态生成 select 菜单选项

Question

我有一个选项字段，我用来添加 "hours"，当我想添加其他 "hours" 时，这个字段会加倍，我需要像这样工作：

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

我selectradio field = 1 [3:00]

当我使用 "hours" 添加另一个选项字段时，我需要运行输出已经在第一个中选择的值，依此类推。

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>

我将 "portion" 更改为 "hours" 以便更容易解释

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 = [];
  };
});

为数组中每个未 select 编辑的项目动态生成 select 菜单选项

Dynamically generate select menu options for each unselected item in an array

javascript

angularjs

ng-options