Запретить пользователям выбирать одно и то же значение в нескольких раскрывающихся списках

Question

Я загружаю таблицу из вызова API, строки таблицы являются динамическими и основаны на возвращаемых значениях из вызова API.Я показываю порядок сортировки и значение должно быть уникальным, и пользователь не должен выбирать ранее выбранные значения.Я пытался следовать в соответствии с этим (http://jsfiddle.net/jnash21/oqezom4y/), но я не могу достичь, так как мой динамический.

Я пытался это (http://embed.plnkr.co/QU4r05n9rQprwyL9Ltxh/).

editor.controller('EditorController', function($scope) {

  $scope.entities = [{name:"pencil",sortOrder:""} ,{name:"notepad",sortOrder:""} ,
  {name:"bookshelf",sortOrder:""}
  ];

  $scope.sortOrderValues=[1,2,3];
});

    <table>
  <tr ng-repeat="x in entities">
    <td>{{ x.name }}</td>
    <td><select ng-model="x.sortOrder"
                ng-options="col for col in sortOrderValues"> 
       </select>
          <span ng-show="!x.sortOrder"> * sort order required</span>  
    </td>

  </tr>
</table>

Как я могу запретить пользователю выбирать один и тот же порядок сортировки в каждой строке, используя угловые js?

Answer 1

Этот поршень может вам помочь.

Прежде всего, сгенерируйте массив от 1 до entities.length (в данном случае 3). Когда вы выбираете опцию, используйте функцию optionSelected. Эта функция сгенерирует ваш начальный массив и вычислит использованный sortOrders по вашему entities. Затем он фильтрует вторые из первого массива.

HTML

<div ng-controller="EditorController">
  <table>
    <tr ng-repeat="x in entities">
      <td>{{ x.name }}</td>
      <td><select ng-model="x.sortOrder"
                  ng-options="col for col in sortOrderValues"
                  ng-change="optionSelected()"> 
         </select>
            <span ng-show="!x.sortOrder"> * sort order required</span>  
      </td>

    </tr>
  </table>
</div>

CONTROLLER

editor.controller('EditorController', function($scope) {

  $scope.entities = [{name:"pencil",sortOrder:""} ,{name:"notepad",sortOrder:""} ,
  {name:"bookshelf",sortOrder:""}
  ];

  // Genereate all the numbers between 1 and $scope.entities.length
  $scope.sortOrderValues= $scope.entities.map(
    function (item, index) {
      return index + 1;
    }
  );

  // Function executed when you select a sortOrder
  $scope.optionSelected = function () {
    // Genereate all the numbers between 1 and $scope.entities.length
    var allIndexes = $scope.entities
      .map(function (entity, index) { return index + 1; });

    // Get all the sortOrder used
    var usedIndexes = $scope.entities
      .map(function(e) { return e.sortOrder; });

    // Remove from the [1, .., $scope.entities.length] array all the sortOrder used
    $scope.sortOrderValues = allIndexes
      .filter(function (order) {
        return !usedIndexes.find(function(index) { return index === order; });
      });
  }
});