Dynamic mutually exclusive fallout in ng-repeat angular

Question

I am having trouble trying to find a solution to this problem:

I have ng-repeat elements, and these elements need to be sorted by a drop-down list of numbers (I don't need this to be done dynamically, I just need to assign values ​​for each element). First of all, I need to display a drop-down menu with values ​​from 1 to items.length;

<div ng-repeat="item in items">
    <span>{{item.name}}</span>
    <span></span> <!-- Here I should display a dropdown with values from 1 to items.length -->
</div>

Also, it would be great if I could make the outliers mutually exclusive between them. For example, if I select the value “1” for the drop-down list in the first item, “1” should not be an option in all other drop-down menus.

There is a fiddle here .

Any help?

Thank!

Answer 1

, , :

HTML:

<div ng-app>
    <div ng-controller="testCTRL">
        <div ng-repeat="item in items">
            <span>{{item.name}}</span>
            <span>
                <select ng-model="modelValues[item.name]">
                    <option></option>
                    <option ng-repeat="value in items" ng-disabled="value.disabled">{{value.value}}</option>
                </select>
            </span>
        </div>

    </div>
</div>

JS:

function testCTRL($scope) {

    $scope.items = [{name: "a", value: 1, disabled: false},
                    {name: "b", value: 2, disabled: false},
                    {name: "c", value: 3, disabled: false}];

    $scope.modelValues = {};

    $scope.$watch('modelValues', function(newVal, oldVal){

            for(var i = 0; i < $scope.items.length; i++){
                $scope.items[i].disabled = false;

                angular.forEach($scope.modelValues, function(value, key) {
                    //Value/Key are strings, you cannot use the strict equality operator                  
                    if($scope.items[i].value == value){
                        $scope.items[i].disabled = true;
                    }
                });
            }
    }, true); // <-- objectEquality check. Expensive!
}

http://jsfiddle.net/sfj2e5ot/5/

Answer 2

, .

<div ng-app>
<div ng-controller="testCTRL">
    {{selectedItems}}
    <div ng-repeat="item in items">
        <span>{{item.name}}</span>
        <select ng-model="$parent.selectedItems[$index]">
            <option value="undefined"></option>
            <option ng-repeat="it in items" ng-show="itShouldBeShowed($index)" ng-value="$index">{{$index}}</option>
        </select>
    </div>
</div>

JS

function testCTRL($scope) {
$scope.selectedItems = [undefined,undefined,undefined];
$scope.items = [{name: "a"},{name: "b"},{name: "c"}];
$scope.itShouldBeShowed = function(value){
    var found = false;
    $scope.selectedItems.forEach(function(item){
        if(item * 1 === value){
            found = true;
        }
    });
    return !found;
    };   
 }

jsfiddle