Kablam Kablam - 8 months ago 31
AngularJS Question

Set two "local" options in an ngSelect

Okay, so I'm populating a dropdown with values from a service:

<select ng-model="things.thing" id="thing" name="thing"
ng-options="thing.id as thing.description for thing in things" >
<option value="" selected>Select a thing</option>

With the json:

{"id": 1, "description": "this is an option"},
{"id": 2, "description": "second option right here"},
{"id": 3, "description": "there are three even"},

This outputs the following:

html page

But my goal is to have an extra option "unknown thing" that, after being selected, activates another input field with an ng-show, where the user can specify their own thing. But when I add an extra this gets ignored in the output?

<option value="0">Add new thing</option>

This is the output:
Snapshot from Firefox Inspector

No extra option. Can I not do this? How would I get this to work?


You can try repeating options instead of using ng-repeat in select

<select ng-model="selectedThing" >
  <option value="Select a thing">Select a thing</option>
  <option ng-repeat="($thing_index, thing) in things track by $thing_index" ng-value="thing.description">{{thing.description}}</option>

In controller:

   $scope.selectedThing = 'Select a thing'
   $scope.things = [ 
      {"id": 1, "description": "this is an option"},
      {"id": 2, "description": "second option right here"},
      {"id": 3, "description": "there are three even"}