angular 1.5X [ngOptions] for regular array

Question

I'm trying to create a drop down menu from a simple array in Angular using the ngOptions attribute from angular 1.5, however after reading the docs and browsing the web I can't seem to get it to work with a 'simple' array (with objects it works fine).

I got the following Data

 ["Interne Vacatures","Human Resources","Sales"]

I use the following code in my view

<select class="form-control" ng-model="widget.GroupNameSearch" id="widgetselectedGroupName" ng-options="group as widget.GroupNameSearch for group in widget.GroupNameSearch | orderBy:'GroupNameSearch' track by widget.GroupNameSearch">
   <option value="" disabled selected>--- Kies een group ---</option>
   <option value="" ng-if="false"></option>
</select>

However my html creates the following:

I am not sure why it produces these results but if i change my array to a json object I can get it to work. Unfortunetly I don't ant to waste the memory. Below is a working example with JSON:

{"groupName": {
    "groupName":"Group 100",
    "mail":"Group100@one365dev1.onmicrosoft.com"}
}



  <select class="form-control" ng-model="widget.selectedGroupName.groupName" id="widgetselectedGroupName" ng-options="group as group.groupName for group in widget.GroupNameSearch | orderBy:'groupName' track by group.groupName" >
                    <option value="" disabled selected>--- Kies een group ---</option>
                    <option value="" ng-if="false"></option> 
                </select>

Any help would be much appreciated. Cheers!

tanmay · Answer 1 · 2017-05-15T12:32:09.290

1

This is happening because of widget.GroupNameSearch in your options.

ng-options="group as widget.GroupNameSearch for group in widget.GroupNameSearch.."
//                   ^^^^^^^^^^^^^^^^^^^^^^ this one

You are trying to reference whole array again as your reference to the current item.

It can be read as value as label for collection. Now, you should't have the whole array itself as label for each item, should you?

Instead, you can have it like this for the array of strings,

ng-options="group as group for group in widget.GroupNameSearch..

edited May 15 '17 at 12:32

answered May 15 '17 at 12:26

tanmay

7,761
2
19
38

Thanks your answer pointed me in the right direction. Another problem was that the array was of the type string. so i had to recreate the array. Thanks a lot. – Rodney Wormsbecher May 15 '17 at 12:59
@RodneyWormsbecher glad it helped a little :) – tanmay May 15 '17 at 13:03

score 0 · Answer 2 · edited May 23 '17 at 12:34

0

To continue what tanmay said, make sure your ng-options are like this. More about that here: ng-options with simple array init

<div ng-controller="Ctrl">
      <select class="form-control" ng-model="widget.selectedGroupName.groupName" id="widgetselectedGroupName" ng-options="a as a for a in groups">

https://jsfiddle.net/brhardwick/4eatv28b/1/

edited May 23 '17 at 12:34

Community

1
1

answered May 15 '17 at 12:32

brhardwick

3,065
2
15
17

angular 1.5X [ngOptions] for regular array

2 Answers2