angularjs - remove option from input select

Question

Can't figure this out for the life of me. Using AngularJS.

I have a dropdown Select field with several options. It is a part of a form that may be completed multiple times (ie "add another" type form). Now, one of the options may only be used once. How can I remove this option from all other select fields after it has been used?

What I'm working with:

html

<select ng-model="item.itemtype">
    <option ng-repeat="i in itemtype" value="{{i}}" ng-init="item.itemtype = itemtype[0]">{{i}}</option>
</select>

angularjs

  $scope.Items = [
    { 'itemtype': '', 'desc': '', 'color': '' }
  ];

  $scope.itemtype = [
    'shirt',
    'pants',
    'hats',
    'shoes',
    'special'];

What I've tried (and really doesn't work)

  $scope.specialremove = function() {
    var exist = Items.indexOf("special")
    if (exist !== 0) {
      return '';
    }
    else {
      return 'special';
    }
  }

I'm hoping I don't have to turn to any other framework to solve this. Feel free to point out any other problems/errors/inefficiencies in my code.

link · Accepted Answer · 2014-05-27 11:35:08Z

1

The first thing that can help is using ng-options:

ng-options="type for type in itemType".

It would be better to have objects with label and value properties, in order to write it as

ng-options="type.value as type.label for type in itemType"

and separate the displayed label from the actual value of the selection.

In your controller you should have something like:

  $scope.itemType= [
      ...
  ];
  $scope.selectedItem= $scope.itemType[0];

So that you can write the select as:

<select ng-Model="selectedItem" ng-options="item.value as item.label for item in itemType"></select>

To remove a selected item you can watch the value of selectedItem in the controller: when it matches the value you want, remove it from the array and update selectedItem accordingly.

Here is a basic fiddle. I simply remove the third option after selecting it, and reset the selected item to the first.

edited May 27, 2014 at 11:35

answered May 27, 2014 at 6:26

link

1,6861 gold badge13 silver badges21 bronze badges

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

7 Comments

user3180105 Over a year ago

Not quite there. I had started off using ng-options but changed to current after following another S/O rabbithole. -- SO, this worked fine for the select field itself, but I couldn't get the placeholder option (orig solved using ng-init) to appear nor could I replicate the $watch pop

link Over a year ago

What about using itemType.pop() with your approach?

user3180105 Over a year ago

I'll try that. Angular is pretty new to me, not 100% with the underlying logic - but I'll give it a go and see what happens

link Over a year ago

The idea is that you only manipulate the underlying model. Your model in this case is the array of itemTypes, so if you want to remove one you should simply manipulate that. Anyway, if you decide to go with the classical ngOptions approach I updated the fiddle to correct a small mistake that prevented the initial selection.

user3180105 Over a year ago

Hmmm let me see if that correction works for me. Trying the .pop() with my original method didn't work. Wondering... should it be .pop or .splice?

|

Collectives™ on Stack Overflow

angularjs - remove option from input select

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related