Populating options using “ng-options” in AngularJS

Question

I have a dropdown and I need to populate it with the prices using AngularJS. Unfortunately the structure of the JSON returned is not straight forward and I am unable to change it as it belongs to a legacy system.

Here is a sample of the JSON:

[
    {"name" : "simpleObjectName", "price" : "27.00"},
    {"name" : "simpleObjectName2", "price" : ["26.99", "27.00", "28.00"]},
    {"name" : "complexObjectName1", "availability" : { "price" : ["25.59", "26.40", "27.50"], "availability" : "AVAILABLE"}},
    {"name" : "complexObjectName2", "availability" : { "price" : ["42.99", "22.00", "237.00"], "availability" : "UNAVAILABLE"}},
    {"name" : "complexObjectName3", "availability" : { "price" : ["23.99", "216.00", "21.00"], "availability" : "UNAVAILABLE"}},
    {"name" : "complexObjectName4", "availability" : { "price" : "21.00", "availability" : "AVAILABLE"}}
]

I need to show the prices of the simpleObjects below in this dropdown together with the prices of the complexObjects only if availability is set to AVAILABLE.

I am new to angular and do not know whether there is a way to show the prices when you have such a structure. Is there something that I can use? I gave filters a try but started getting a couple of errors and had to revert the change.

EDIT : Update to JSON. Found out there can be multiple prices related to offers and color differences. I need to show all the prices for all available complexObjects and simpleObjects.

Answer 1

You can display the objects in the ng-repeat as follows:

<div ng-app="App" ng-controller="MainCtrl">
    <select ng-model="selectedItem" ng-options="c as (c.name + ' - ' + c.price + c.availability.price) for c in containers">
        <option value="">--select --</option>
    </select>
</div>

And filter out the items that are unavailable in your controller:

$scope.containers = [yourcontainerjson].filter(function ($c) {
        if ($c.availability === undefined || 
            $c.availability.availability == 'AVAILABLE') {
            return $c;
        }
 });

You could also define a filter module and apply that in the ng-repeat. Plunker .

Answer 2

Updated LINK

HTML code:

<div ng-app="App" ng-controller="MainCtrl">
        <h3>Option 1 (standard)</h3>

    <select ng-model="selectedItem" ng-options="c as (c.name + ' - ' + c.price + c.availability.price) for c in containers">
        <option value="">--select --</option>
    </select>

</div>

Answer 3

You can use ng-repeat-start and ng-repeat-end with ng-if

see this Demo

MarkUp

<select>
  <option ng-repeat-start="r in records" ng-if="r.price">{{r.name}}-{{r.price}}</option>
  <option ng-repeat-end ng-if="!r.price && r.availability && r.availability.availability == 'AVAILABLE'">{{r.name}}-{{r.availability.price}}</option>
</select>