在 AngularJS 的下拉列表中显示 JSON 数据答案

【问题标题】：Displaying JSON data in drop-down in AngularJS在 AngularJS 的下拉列表中显示 JSON 数据
【发布时间】：2014-06-27 13:33:55
【问题描述】：

我的 document.json 文件包含类似的数据

[
    {"name" :"B"},
    {"name" :"A"},
    {"name" :"D"},
    {"name" :"E"}
]

当我尝试在下拉列表中显示 json 数据时，最后一个元素 E 仅显示在下拉 .my html 文件中，如

<select ng-model="selectedTestAccount" ng-options="c as c.name for c in testAccounts"></select>

还有我的脚本文件，比如

sampleApp.controller('DemoCtrl', function ($scope, $http) {
  $scope.selectedTestAccount = null;
  $scope.testAccounts = [];

  $http.get('document.json').success(function (data) {
    $scope.testAccounts = data;
  });
});

如何在下拉列表中显示此 document.json 数据，默认选择为 AngularJS 中的第一个元素。请有任何指导方针

【问题讨论】：

我认为您的数据不正确。因为每个键的名称都相同，所以它会被另一个键覆盖。所以最后有一个只有 E 值的键。
谢谢，刚才我编辑了 JSON 对象结构，但名称对我的要求很常见。
不，我不是说要删除名称字段。但在此之前，您在一个对象中有 4 个名称字段。这是不可能的。
是的，我编辑了 JSON 结构，谢谢
我认为帮助你的 cmets 对你的问题似乎很重要。你应该给他们投票，这样他们就会出现在帖子的开头，并对其他观众有帮助。谢谢

标签： javascript json angularjs drop-down-menu ng-options

【解决方案1】：

您的 JSON 不太正确。您需要在每个项目周围加上大括号，如下所示：

[ 
  { "name" :"B" }, 
  { "name" :"A" }, 
  { "name" :"D" }, 
  { "name" :"E" } 
]

您可以默认选择下拉菜单中的第一项，如下所示：

$scope.selectedTestAccount = $scope.testAccounts[0];

Demo

【讨论】：

谢谢，刚才我得到了我的 json 对象结构，但是你的回答没有读取 documet.json 文件，这对我很重要。你能回答阅读 document.json 文件吗？
@Shekkar，我已经更新了我的答案中的演示以从 document.json 文件中读取。
谢谢@Jerrad，我知道我停止了你的演示帮助我做每一件事