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

Question

我在循环 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>

这个解决方案似乎有效。

Answer 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>

Answer 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

Answer 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

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

Loop through the JSON file which has a unique ID with ng-repeat

angularjs

ng-repeat

angularjs-ng-repeat