Binding an OBJECT ARRAY to <ul> in AngularJs

Question

I am populating a dropdownbutton from a array. The whole key value pair is being shown as you see in the picture.

1) I need to show only the value of Label.

2) I want to have "ALL LOCATIONS" as a default item.

Here is how the Locations look like :

Locations:Array[2]
0:Object
$$hashKey:"object:772"
Id:1600
Label:"California"
__proto__:Object
1:Object
$$hashKey:"object:773"
Id:1600
Label:"Atlanta"
__proto__:Object

HTML :

<div class="btn-group btn-toolbar btn-margin-left" style="float: right;">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            ALL LOCATIONS {{selectedItem}}
                            <span class="caret"></span>
                        </button>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li ng-repeat="Label in Summary.Locations">
                                <a ng-click="dropboxitemselected(Label)">
                                    {{Label}}</a>
                            </li>
                        </ul>
</div>

js :

WotcDashBoardModuleService.GetDashBoardSummary(Ein).then(function (response) {
        $scope.Summary = response.data.WotcSummary;

        $scope.selectedItem;
        $scope.dropboxitemselected = function (item) {

            $scope.selectedItem = item;
            //alert($scope.selectedItem);
        }
        console.log($scope.Summary);
    });

He said "I need to show only the value of Label" and then showed he's seeing the entire object. — Gargoyle
– Gargoyle, Commented Jun 2, 2016 at 22:14
Just for information, it looks like you're willing to use <select>. Here's the syntax of the select if you need it... <select ng-options="location as location.label for location in locations" ng-model="selectedLocation"> <option value="">All Locations</option> </select> — Melou
– Melou, Commented Jun 2, 2016 at 22:25

Gargoyle · Accepted Answer · 2016-06-02 22:12:14Z

1

Summary.Locations is your array of objects, so Label gets bound to each element individually. That means you need to show {{Label.Label}} instead of just {{Label}} and you'll see the name.

answered Jun 2, 2016 at 22:12

Gargoyle

10.5k23 gold badges97 silver badges177 bronze badges

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

1 Comment

BumbleBee Over a year ago

both are correct answers for the two questions I asked. I would like to select both as answers but only one is allowed!!!!

Alon Eitan · Accepted Answer · 2016-06-02 22:15:15Z

1

This part:

ALL LOCATIONS {{selectedItem}}

Should be replaced with:

<span ng-if="!selectedItem">ALL LOCATIONS</span>
<span ng-if="selectedItem" ng-bind="selectedItem.Label"></span>

Or with:

<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>

answered Jun 2, 2016 at 22:15

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

Collectives™ on Stack Overflow

Binding an OBJECT ARRAY to <ul> in AngularJs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related