使用 ng-repeat 循环遍历具有唯一 ID 的 JSON 文件答案

【问题标题】：Loop through the JSON file which has a unique ID with ng-repeat使用 ng-repeat 循环遍历具有唯一 ID 的 JSON 文件
【发布时间】：2016-10-15 06:03:20
【问题描述】：

我在循环 JSON 文件时遇到问题。 Ng-repeat 遍历数据数组，其中每个字段都有一个唯一的 id。

 var fullData = {
      data: [{
        505: {
          price: "505",
          source: "Amazon"
        },
        456: {
          price: "4555",
          source: "Jet"
        }
      }]
    }

<div ng-repeat="data in fullData.data">
{{ data[$index]}}
</div>

这个解决方案似乎有效。

【问题讨论】：

你有什么问题？
你不能改变这个 json 结构吗？不同的方式..我想你像这样改变json结构{数据：[{id：505价格：“505”，来源：“亚马逊”}，{id：890价格：“4555”，来源：“Jet” } ] }
@rebello 这是你给 var fullData 的错误，如果你想使用它，它应该是范围变量首先更改它然后尝试它应该是 $scope.fullData

标签： angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

像这样试试。

var app = angular.module('app',[])
app.controller('ctrl',function($scope){
  
  $scope.data = {
   data: [{
     505: {
           price: "505",
           source: "Amazon"
         },
     456: {
           price: "4555",
           source: "Jet"
         }
    }]
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
      <div ng-repeat="(key,value) in data.data">
         <div ng-repeat="(k,v) in value">
           {{v.price}}: 
            {{v.source}}
         </div>
      </div>
</div>

【讨论】：

【解决方案2】：

你应该在控制器中使用 $scope 变量来绑定数据，像这样改变你的代码，

控制器

app.controller("DemoCtrl", ["$scope",
  function($scope) {
     $scope.fullData = {
      data: [{
        505: {
          price: "505",
          source: "Amazon"
        },
        456: {
          price: "4555",
          source: "Jet"
        }
      }]
    }
  }
]);

HTML

<body ng-app='app'>
  <div class="media-list" ng-controller="DemoCtrl">
    <div ng-repeat=" data in fullData.data ">
     {{data}}
    </div>
  </div>
</body>

DEMO

【讨论】：

【解决方案3】：

正如我在评论中提到的不要使用

var fulData

使用

$scope.fullData

这会自动绑定视图中的值

和你一样

 {{ data[$index]}}

不是在ng-repeat数据中访问的方式本身就足以像这样访问

 <div ng-repeat="data in fullData.data">
  {{$index}}
 {{ data}}
  </div>

这里是js代码

$scope.fullData = {
  data: [{
    505: {
      price: "505",
      source: "Amazon"
    },
    456: {
      price: "4555",
      source: "Jet"
    }
  }]
}

工作演示http://codepen.io/vkvicky-vasudev/pen/yaEEyv

【讨论】：