javascript - 使用 angularjs 对 Json 文件进行 Ng 重复?

标签 javascript json angularjs

我有一个名为 brands.json 的 json 文件:

{
  "brands": {
    "Honda": [
      "Accord",
      "Civic"
    ],
    "Porsche": [
      "Cayenne",
      "Cayman"
    ]
  }
}

我尝试遍历此列表并列出品牌(例如本田和保时捷)并使用 HTML 列表呈现。

<li ng-repeat="brands in items">{{brands}}</li>

JS:

$scope.items= [];
$http.get('brands.json').then(function(response) {
    $scope.items =response.data.brands;
});

这段代码工作正常,但它显示了品牌名称中的数组,例如相反,如果显示 Honda,它会显示 ["Accord", "Civic"]。我希望它只显示品牌名称。

<li>Honda</li>
<li>Porsche</li>

最佳答案

尝试:

<li ng-repeat="(key, value) in items">{{key}}</li>

引自docs :

(key, value) in expression – where key and value can be any user defined identifiers, and expression is the scope expression giving the collection to enumerate.

For example: (name, age) in {'adam':10, 'amalie':12}.

关于javascript - 使用 angularjs 对 Json 文件进行 Ng 重复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23324100/

相关文章:

ruby-on-rails - 如何从序列化为 JSON 的 ActiveModel 对象恢复关联类?

php - 在 PHP 中将新的键/值对添加到 JSON

javascript - 为什么angularjs上下文只继承一级对象

javascript - 在配置 AngularJS 中访问主机名

javascript - 除非全局声明,否则无法从事件处理程序内的函数更新变量

javascript - 使用 Ramda 通过多个操作从值创建 JavaScript 对象

javascript - 联系表单响应非常慢(PHP/jQuery/Ajax)

javascript - AngularJS 父子循环分页

javascript - 为什么下面的代码会出现循环引用错误?以及如何解决?

angularjs - 当日历被 ng-show 隐藏时,如何更新 angularjs fullcalendar