Prevent users from selecting same value in multiple dropdowns

Question

I am loading a table from an API call , table rows are dynamic and it is based on the returned values from API call. I am displaying sort order and value should be unique and user shouldn't select a previously selected values. I tried to follow as per this (http://jsfiddle.net/jnash21/oqezom4y/) but i am not able to achieve as mine is dynamic.

I tried this (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>

How can I prevent a user from selecting same sort order in each row using angular js?

Answer 1

This plunker might help you.

First of all, genereate an array from 1 to entities.length (this case, 3). When you select an option, tirgger the optionSelected function. This function will generate your inital array and calculate the used sortOrders by your entities. Then it filters the second ones from the first array.

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; });
      });
  }
});