如何从 JSON 文件中重复不同的对象

Question

sry 伙计们，我已经编辑了我的问题。希望你们现在可以理解：D 我想说的是我有一个名为 data.json 的文件，在该文件中我有这些数据：

{
"FOOD": [{
     "item_name": "Starter"
}],
"DRINKS": [{
     "item_name": "COKE"
}]
}

我在 app.js 中写过代码

app.controller('DataCtrl', ['$scope', '$state', '$http', 
     function($scope, $state, $http) {$http.get('js/data.json').success ( function(data) {
    $scope.FOOD = data.FOOD;
    $scope.DRINKS = data.DRINKS;
}) 

}]);

details.html

<ion-view view-title="Menus">
  <ion-content ng-controller="DataCtrl">
    <ion-item ng-repeat="i in FOOD" class="item-thumbnail-left item-text-wrap item-icon-right">
       <h2 class="title">{{i.item_name}}</h2>
    </ion-item>
  </ion-content>
</ion-view>

我可以从食物中提取所有数据，但我想要在食物和饮料之间动态更改数据。当有人点击食物时，它应该显示食物数据，当有人点击饮料时，我想要ng-repeat="i in FOOD"应更改为ng-repeat="i in DRINKS"。我怎样才能做到这一点？

Answer 1

我没有完全理解你的问题。也许这段代码会对你有所帮助。

当有人点击 FOOD(parameter='FOOD') 时，$scope.array 使用 FOOD 数据填充，当有人点击 DRINKS(parameter='DRINKS') 时，$scope.array 使用 DRINKS 数据填充。

控制器

app.controller('myCtrl', function($scope) {
    $scope.parameter = "DRINKS";
    $scope.data = {
        "FOOD": [{
            "item_name": "Starter"
        }],
        "DRINKS": [{
            "item_name": "COKE"
        }]
    }
    $scope.FOOD = $scope.data.FOOD;
    $scope.DRINKS = $scope.data.DRINKS;
    if ($scope.parameter == 'FOOD') $scope.array = $scope.FOOD;
    else $scope.array = $scope.DRINKS;
});

模板

<ion-view view-title="Menus">
  <ion-content ng-controller="DataCtrl">
    <ion-item ng-repeat="i in array" class="item-thumbnail-left item-text-wrap item-icon-right">
       <h2 class="title">{{i.item_name}}</h2>
    </ion-item>
  </ion-content>
</ion-view>

堆栈溢出演示

var app = angular.module('myApp', ['ngRoute']);
app.controller('myCtrl', function($scope) {
  $scope.parameter = "DRINKS";
  $scope.data = {
    "FOOD": [{
      "item_name": "Starter"
    }],
    "DRINKS": [{
      "item_name": "COKE"
    }]
  }
  $scope.FOOD = $scope.data.FOOD;
  $scope.DRINKS = $scope.data.DRINKS;
  if ($scope.parameter == 'FOOD') $scope.array = $scope.FOOD;
  else $scope.array = $scope.DRINKS;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="i in array">
    {{i.item_name}}
  </div>

</div>
<script>
</script>