CODEWITHSUNDEEP
javascriptangularjs
John Spiteri
John Spiteri

Reputation: 594

How to use ng-options to iterate through an array within an object?

How can I use ng-options to populate a select element with the results of the "categories" arrays, that are within the objects?

        {
          title: "Star Wars",
          categories: ["Coding", "Exploration", "Adventure"]
        }, {
          title: "Street Wars",
          categories: ["Surfing", "Exploration", "Testing"]
        },

I want to populate a select element with all the available categories, and then use "unique" to filter out the duplicate entries...

Upvotes: 1

Views: 2307

Answers (2)

mitch
mitch

Reputation: 1831

You can do it this way provided you are using an ngRepeat

 <select ng-model="cat" ng-options="c for c in movie.categories"></select>

This is a working example.

EDIT: ngModel is required for select.

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

As the comment says, it's probably easier to create the unique part in the controller, and use ngOptions on the new array:

$scope.uniqueOptions = [];
for (var i = 0; i < data.length; i++) {
    for (var j = 0; j < data[i].categories.length; j++) {
        if ($scope.uniqueOptions.indexOf(data[i].categories[j]) === -1) {
            $scope.uniqueOptions.push(data[i].categories[j])
        }
    }
}

And the options:

<select ng-model="someModel" ng-options="category as category for category in uniqueOptions"> </select>

Upvotes: 2

Related Questions