CODEWITHSUNDEEP
javascriptarraysangularjsforms
user3180105
user3180105

Reputation: 381

angularjs - remove option from input select

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.

Upvotes: 2

Views: 9956

Answers (1)

link
link

Reputation: 1676

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.

Upvotes: 1

Related Questions