Dynamic mutually exclusive dropdown in ng-repeat of angularjs

Question

I'm having some troubles trying to reach a solution for this problem:

I have an ng-repeat of items, and those items need to be sorted by a dropdown of numbers (I don't need this to be done dinamically, I just need to assign a values to each item). First of all, I need to display a dropdown 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>

Besides that, it'd be great if I can make the dropdown values mutually exclusive between them. For example, if I choose "1" value for the dropdown in first item, "1" should not be an option in the all other dropdowns.

Here there is a fiddle.

Any help?

Thanks!

could you add a fiddle?

Anubhav
– Anubhav

2014-12-01 06:01:36 +00:00
Commented Dec 1, 2014 at 6:01 — Anubhav
– Anubhav, Commented Dec 1, 2014 at 6:01
i've just added it ;)

Fede Snieg
– Fede Snieg

2014-12-01 07:12:50 +00:00
Commented Dec 1, 2014 at 7:12 — Fede Snieg
– Fede Snieg, Commented Dec 1, 2014 at 7:12

Federico · Accepted Answer · 2014-12-01 18:32:47Z

I think this code will resolve your problems

<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>

And here the 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;
    };   
 }

Here you have jsfiddle

Max · Accepted Answer · 2014-12-01 20:21:22Z

You could also use a scope watch to see which items were selected:

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/

Collectives™ on Stack Overflow

Dynamic mutually exclusive dropdown in ng-repeat of angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related