Angularjs ng-options with an array of key-pair

Question

I'm having below array. I'm trying different ng-options but no use. How to render in Drop down using Angularjs ng-options?

getLanguages: [0: Object: Key:"en" Value:"English", 1: Object: Key:"fr" Value:"France"]

<select ng-options="language.Object.Value for language in getLanguages track by language.Object.Value"/>

<select data-ng-model="vm.model">
    <option data-ng-repeat="language in getLanguages" value="{{language.Object.Key}}">{{language.Object.Value}}</option>
</select>

I got Answer:

<select class="form-control" data-ng-model="vm.model" >
    <option data-ng-repeat="language in vm.getLanguages()" value="{{language.Key}}">{{language.Value}}</option>
</select>

Post real JavaScript code. `[Object: Key:"en" Value:"English", Object: Key:"fr" Value:"France"]` is not JavaScript. Also post all the relevant code. We have no idea of what vm.getLanguages() actually does. — JB Nizet, Dec 28 '15 at 21:33

score 1 · Answer 1 · answered Dec 28 '15 at 21:42

1

Try ng-options = "language.Object.Key as language.Object.Value for language in getLanguages()"

answered Dec 28 '15 at 21:42

David Meza

3,080
3
16
18

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/10709088) – konqi Dec 28 '15 at 23:55
@konqi actually, I believe that this does provide an answer to the question, though it could use a bit more information than just a single line of code. – Claies Dec 29 '15 at 01:37
@Claies I don't think so. Even if the code solves to problem, "try the following" is not an answer because it is a request for a test/additional information/clarification. Therefor it should be a comment. If such a comment would lead to a solution an answer could be derived from it. To qualify as an answer the post should at least contain a short explanation of what is wrong and why the provided solution would work. The accepted answer provides everything this post is missing. Arguably the post could be improved into an answer but it wasn't in the review queue for no reason. – konqi Dec 29 '15 at 09:33

score 0 · Answer 2 · edited Dec 29 '15 at 01:26

0

angular.module('app', []).controller("controllername", ["$scope", function($scope) {
    $scope.getLanguages = [
        {"en":"English"},
        {"fr":"French"}
    ];

    $scope.getKey = function(getLanguages) {
        return Object.keys(getLanguages)[0];
    }
}]);

edited Dec 29 '15 at 01:26

Dan Lowe

51,713
20
123
112

answered Dec 28 '15 at 21:44

score 0 · Accepted Answer · edited May 23 '17 at 12:15

Really the answer is a combination of both David and Stark's answers above.

First you need to make sure your controller is correctly returning the languages, as Stark indicated in his answer.

For example, it should include something like:

$scope.languages = [
  { key : "en",
    value : "English" },
  { key : "fr",
    value : "French" }];

Then you can populate your <select> options using those languages. As David pointed out, the correct syntax would be similar to the following:

<select ng-model="model.language"
        ng-options="language.key as language.value for language in languages">

What this syntax is saying is "show the 'value' in the drop down and map it to the 'key' for each 'language' in the collection returned by the 'languages' variable in the scope." So the drop down will show "English", "French", etc., and when you select one, it will set the model value to "en", "fr", etc.

Here is a working Plunkr showing the above in action.

Angularjs ng-options with an array of key-pair

3 Answers3

Linked