带有密钥对数组的 Angularjs ng-options答案

【问题标题】：Angularjs ng-options with an array of key-pair带有密钥对数组的 Angularjs ng-options
【发布时间】：2015-12-29 09:26:49
【问题描述】：

我有以下数组。我正在尝试不同的 ng-options 但没有用。如何使用 Angularjs ng-options 在下拉菜单中渲染？

获取语言： [0: 对象: 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>

我得到了答案：

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

【问题讨论】：

发布真实的 JavaScript 代码。 [Object: Key:"en" Value:"English", Object: Key:"fr" Value:"France"] 不是 JavaScript。还要发布所有相关代码。我们不知道 vm.getLanguages() 实际做了什么。

标签： angularjs

【解决方案1】：

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

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review
@konqi 实际上，我相信这确实提供了问题的答案，尽管它可以使用比一行代码更多的信息。
@Claies 我不这么认为。即使代码解决了问题，“尝试以下”也不是答案，因为它是对测试/附加信息/澄清的请求。因此，它应该是一个评论。如果这样的评论会导致解决方案，则可以从中得出答案。要获得作为答案的资格，该帖子至少应该包含一个简短的解释，说明什么是错误的以及所提供的解决方案为什么会起作用。接受的答案提供了这篇文章所缺少的一切。可以说，该帖子可以改进为答案，但无缘无故不在审核队列中。

【解决方案2】：

真正的答案是上面David 和Stark 的答案的组合。

首先，您需要确保控制器正确返回语言，正如 Stark 在他的回答中指出的那样。

例如，它应该包括以下内容：

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

然后您可以使用这些语言填充您的<select> 选项。正如大卫指出的那样，正确的语法类似于以下内容：

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

这个语法的意思是“在下拉列表中显示‘值’，并将其映射到范围内‘语言’变量返回的集合中每个‘语言’的‘键’。”所以下拉菜单会显示“English”、“French”等，当你选择一个时，它会将模型值设置为“en”、“fr”等。

这是一个working Plunkr，展示了上述内容。

【讨论】：

【解决方案3】：

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

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

【讨论】：