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.

you need to filter the array ...what have you tried? Can do it with a custom filter or map it in service or controller — charlietfl
– charlietfl, Commented Sep 11, 2015 at 12:56
@charlietfl i was trying to use something of this sort: | filter:{ availability.availability : 'AVAILABLE' } but im trying it now and it just returns me the complexObjects so that won't do the trick either.. — user1809790
– user1809790, Commented Sep 11, 2015 at 13:07
I added a filter to SVK's answer but it hasn't been accepted yet. — skubski
– skubski, Commented Sep 11, 2015 at 13:08
This edit will be visible only to you until it is peer reviewed. I didn't want to post almost exactly the same answer with the addition of a filter... — skubski
– skubski, Commented Sep 11, 2015 at 13:17

skubski · Accepted Answer · 2015-09-11 13:26:01Z

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.

answered Sep 11, 2015 at 13:26

skubski

1,6162 gold badges21 silver badges27 bronze badges

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

5 Comments

user1809790 Over a year ago

I figured out that a particular object can have 1 or several prices depending on some specs & offers. Can these be shown?

skubski Over a year ago

Sure, they can be shown. But your JSON (data) seems to get a tad inconsistent. You might want to consider to alter the structure of your JSON when it gets fetched from your server. (Since it is a legacy system). I changed the updated data in the plunker and it still works.

user1809790 Over a year ago

then I believe I need to alter the structure indeed, as we would need that each price is a different option, so if a particular object has 3 prices, those would show up as 3 options in the list

skubski Over a year ago

You can overcome that hurdle easily. I updated my plunker to reflect this @user1809790.

skubski Over a year ago

@user1809790 did you see the updated version that alters your array of types?

SVK · Accepted Answer · 2015-09-11 12:50:44Z

0

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>

answered Sep 11, 2015 at 12:50

SVK

2,2272 gold badges22 silver badges41 bronze badges

Comments

gaurav bhavsar · Accepted Answer · 2015-09-11 13:11:34Z

0

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>

answered Sep 11, 2015 at 13:11

gaurav bhavsar

2,0512 gold badges26 silver badges36 bronze badges

6 Comments

user1809790 Over a year ago

I figured out that a particular object can have 1 or several prices depending on some specs & offers. Can these be shown?

gaurav bhavsar Over a year ago

Yes, you can edit ng-if condition based on your requirement.

user1809790 Over a year ago

sorry I am new to Angular and not sure how I can do a repeat inside an ng-if :/

gaurav bhavsar Over a year ago

I already added ng-if, you just have to change condition as you required. check ng-if in inside option tag.

user1809790 Over a year ago

yes but how am I going to loop to show the prices in the array as different options? is there some index I can use?

|

Collectives™ on Stack Overflow

Populating options using "ng-options" in AngularJS

3 Answers 3

5 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related