Filtering a dropdown in Angular

Question

I have a requirement for a select html element that can be duplicated multiple times on a page. The options for these select elements all come from a master list. All of the select elements can only show all of the items in the master list that have not been selected in any of the other select elements unless they just were duplicated.

When you select a new item from a duplicated select element, it seems to select the option after the one you selected even though the model still has the correct one set. This always seems to happen in IE11 and it happens sometimes in Chrome.

I realize this sounds convoluted, so I created a jFiddle example.

Try these steps:

Select Bender
Click the duplicate link
Select Fry (on the duplicated select)
Notice that the one that is selected is Leela but the model still has Fry (id:2) as the one selected

Can anyone tell me how I might get around this or what I might be doing wrong?

Here is the relevant Angular code:

myapp.controller('Ctrl', function ($scope) {
    $scope.selectedIds = [{}];

    $scope.allIds = [{ name: 'Bender', value: 1},
                     {name: 'Fry', value: 2},
                     {name: 'Leela', value: 3 }];

    $scope.dupDropDown = function(currentDD) {
        var newDD = angular.copy(currentDD);
        $scope.selectedIds.push(newDD);
    }
});


angular.module('appFilters',[]).filter('ddlFilter', function () {
     return function (allIds, currentItem, selectedIds) {


         //console.log(currentItem);
         var listToReturn = allIds.filter(function (anIdFromMasterList) {
                if (currentItem.id == anIdFromMasterList.value)
                    return true;

                var areThereAny = selectedIds.some(function (aSelectedId) {
                    return  aSelectedId.id == anIdFromMasterList.value;
                });
                return !areThereAny;
            });
            return listToReturn;
        }
});

And here is the relevant HTML

<div ng-repeat="aSelection in selectedIds "> 
<a href="#" ng-click="dupDropDown(aSelection)">Duplicate</a>
<select ng-model="aSelection.id" ng-options="a.value as a.name for a in allIds | ddlFilter:aSelection:selectedIds">
<option value="">--Select--</option>
</select>
</div>

Actually looking at this some more it looks like it happens in Chrome as well. Just not all the time. I am going to update the post — Brian S.
– Brian S., Commented May 30, 2014 at 11:52

Mathews · Accepted Answer · 2014-05-30 08:48:02Z

0

Hi I have just made a small change in your dupDropDown function as follows

$scope.dupDropDown = function(currentDD) {

        $scope.selectedIds.push({});
    }

Please check if this works for you.

answered May 30, 2014 at 8:48

Mathews

8991 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brian S. Over a year ago

I think that would make it so the duplicated dropdown would not have the duplicated value. I sorta need it to have that value...

Mathews Over a year ago

I am not able to fully understand your requirement.What I understand is, you want your subsequent drop downs not to have already selected values. Is that right?

Brian S. Over a year ago

Only if they were not duplicated. I actually didnt put that in the Fiddle as it works correctly. Only the duplicated ones should have the value of the original ones.

Brian S. Over a year ago

I know this is totally crazy and thanks for taking a look at it.

Collectives™ on Stack Overflow

Filtering a dropdown in Angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related