AngularJS select tag not populating with object data when in ng-repeat

Question

I have an issue with angularjs's select directive.

Here is my code:

<ul class="thumbnails">
    <li class="span4" ng-repeat="product in productsDTO">
        <div class="thumbnail">

        ...
        ...
        ...


        <div class="span4" ng-repeat="varCat in product.varietyCategoriesAndOptions">
            {{varCat.varietyCategoryName}}
            <br />

            <br /><br />

            <select ng-model="varCat.varietyCategoryOption" ng-options="varietyCategoryOptionTransfer.varietyCategoryOptionId as varietyCategoryOptionTransfer.varietyCategoryOptionValue for varietyCategoryOptionTransfer in varCat.varietyCategoryOptions">
                <option value="">Select color</option>
            </select>

        </div>

        ...
        ...
        </div>
    </li>
</ul>

I have a $http call that returns json which gets added to the local scope.

function getProductsByCategoryIdServiceCall(CategoryService, categoryId){
          CategoryService.getProductsByCategoryId(categoryId).success(function(data){
              $scope.productsDTO = data;
          }).error(function(data){
                  $scope.productsDTO = null;
          });
      }

So basically I have a set of json objects returned from a webservice call, I set the local $scope to have those json objects, and the first iteration tag for productsDTO iterates over the newly populated objects.

Each product has a seperate object that shows what special categories this product has, and the options for those category(s). I am trying to have the select tag be bound (ng-model) to the varCat Object. This is the one currently being iterated over, and the same object that also contains the array of options for the category that I am trying to set for the select tag directive. I added a special field on the varietycategory object called varietycategoryoption specifically to hold the current state of that particular select category. I'm doing it this way because there could be many many of these category select's per page, and it is unknown how many, so I can't just hard code it into the page.

It doesnt seem to be working. Does anyone have any advice?

All of the json is a lot of data, but here is the part of the json return inside product that has all of the values associated with the select box:

"varietyCategoriesAndOptions":{"1":{"varietyCategoryId":111,"varietyCategoryName":"color","varietyCategoryOptions":{"202":{"varietyCategoryOptionId":202,"varietyCategoryOptionValue":"red"},"203":{"varietyCategoryOptionId":203,"varietyCategoryOptionValue":"blue"}},"varietyCategoryOption":null}}

**UPDATE******************* user Chandermali said I was treating my data like it was in array format, when it is in object format. Chandermali said to use this format

(key, value) in product.varietyCategoriesAndOptions

I tried this in my select

<select ng-model="varCat.varietyCategoryOption" ng-options="(varietyCategoryOptionTransfer.varietyCategoryOptionId, varietyCategoryOptionTransfer.varietyCategoryOptionValue) in varCat.varietyCategoryOptions">
       <option value="">Select color</option>
  </select>

And got this error:

 Error: [ngOptions:iexp] Expected expression in form of '_select_ (as _label_)? 
 for (_key_,)?_value_ in _collection_' but got 
 'varietyCategoryOptionTransfer.varietyCategoryOptionId, 
 varietyCategoryOptionTransfer.varietyCategoryOptionValue in 
 varCat.varietyCategoryOptions'.

Don't use the . notation in the (key,value) variable names and try. — Chandermani
– Chandermani, Commented Dec 4, 2013 at 17:27

David Pugh · Accepted Answer · 2013-12-05 04:27:25Z

1

This change in the select tag was enough for it to work for me.

      <select ng-model="varCat.varietyCategoryOption" ng-options="value.varietyCategoryOptionId as value.varietyCategoryOptionValue for (key,value) in varCat.varietyCategoryOptions">
            <option value="">Select color</option>
     </select>

I just had the wrong formatting on the select directive to access my object graph. The select box is now being populated with the data. Thank you very much for you patience.

edited Dec 5, 2013 at 4:27

answered Dec 5, 2013 at 4:04

David Pugh

1,0024 gold badges21 silver badges34 bronze badges

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

1 Comment

Alex Burdusel Over a year ago

you can drop the <option> if you use ng-options

Chandermani · Accepted Answer · 2013-12-04 06:38:01Z

0

Seeing your json neither your varietyCategoriesAndOptions or varietyCategoryOptions are array. These are object maps. You need to use the syntax for object map like

(key, value) in expression – where key and value can be any user defined identifiers, and expression is the scope expression giving the collection to enumerate.

For example: (key, value) in product.varietyCategoriesAndOptions

answered Dec 4, 2013 at 6:38

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

1 Comment

David Pugh Over a year ago

Hello, I tried what I thought your object oriented approach should be, but it did not work. I added the error it gave me and how my select tag directive looks above.

Collectives™ on Stack Overflow

AngularJS select tag not populating with object data when in ng-repeat

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related