我正在使用AngularJS和来自parse.com的两个JSON数组源处理cordova中的代码。它基本上适用于具有多种可变定价选项的食品。我已经定义了2个类别，称为风味和大小（对于食物的类型没有意义，但请耐心等待，因为我正在测试）。每种食品都有一套独立的口味和尺寸。我在填充口味和大小方面遇到了麻烦。这是从解析中检索数据的工厂：
app.factory('ParseData', function($http) {
var ParseFactory = {};
ParseFactory.getItems = function() {
return $http({method : 'GET',url : 'https://api.parse.com/1/classes/Menu/', headers:
{ 'X-Parse-Application-Id':'X',
'X-Parse-REST-API-Key':'X'}})
.then(function(response) {
return response.data;
});
};
ParseFactory.getOptions = function() {
return $http({method : 'GET',url : 'https://api.parse.com/1/classes/Options/', headers:
{ 'X-Parse-Application-Id':'X',
'X-Parse-REST-API-Key':'X'}})
.then(function(response) {
return response.data;
});
};
return ParseFactory;
});
JSON输出如下：
{"results":
[{"active":false,
"createdAt":"2015-10-05T20:19:58.264Z",
"desc":"With arugula, smoked almonds \u0026 chipotle vinaigrette",
"img":"https://signsrestaurant.ca/wp-content/uploads/2015/09/Watermelon-Quinoa-Jimaca-Salad.jpg",
"name":"Watermelon Quinoa Jicama Salad (\u003cspan style=\"color: lightblue;\"\u003eVE\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003eGF\u003c/span\u003e, \u003cspan style=\"color: yellow;\"\u003eDF\u003c/span\u003e)",
"objectId":"x1zpkWmvmP",
"price":14,
"updatedAt":"2015-10-09T17:20:50.527Z"},
{"active":false,
"createdAt":"2015-10-05T20:35:01.363Z",
"desc":"Buffalo mozzarella, tomato, marinated artichoke hearts, black olives, pesto \u0026 balsamic drizzle",
"img":"https://signsrestaurant.ca/wp-content/uploads/2015/09/Mediterranean-Salad.jpg",
"name":"Mediterranean Salad (\u003cspan style=\"color: lightgreen;\"\u003eV\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003eGF\u003c/span\u003e)",
"objectId":"nI5VSpdBUn",
"price":15,
"updatedAt":"2015-10-09T17:20:30.545Z"}]}
和
{"results":
[{"createdAt":"2015-10-08T19:24:20.527Z",
"flavors":[
{"active":false,"name":"Vanilla","price":8},
{"active":false,"name":"Almond","price":8},
{"active":false,"name":"Hazelnut","price":8},
{"active":false,"name":"Caramel","price":8}],
"objectId":"7lctN9MtLs",
"sizes":[
{"active":false,"name":"Small","price":0},
{"active":false,"name":"Medium","price":5},
{"active":false,"name":"Large","price":10}],
"updatedAt":"2015-10-10T01:14:19.845Z"},
{"createdAt":"2015-10-08T19:25:18.172Z",
"flavors":[
{"active":false,"name":"Strawberry","price":8},
{"active":false,"name":"Chocolate","price":8},
{"active":false,"name":"Mint","price":8},
{"active":false,"name":"Cherry","price":8}],
"objectId":"Drj9mdR7or",
"sizes":[
{"active":false,"name":"Small","price":5},
{"active":false,"name":"Medium","price":10},
{"active":false,"name":"Large","price":15}],
"updatedAt":"2015-10-10T01:14:17.632Z"}]}
现在，我的HTML标记包含3个页面，一个菜单页面，一个选项页面和一个订单页面。菜单页面从第一个JSON数据填充，看起来效果很好。然而，选项页面给了我一些问题。我是检索JSON的新手，但似乎无法解决这个问题。这是我的options.html标记：
<md-card ng-repeat="item in items.results | filter:true">
<img ng-src="{{item.img}}"
class="md-card-image"
alt="">
<md-card-content class="content">
<h2 class="md-title"><div ng-bind-html="item.name"></div></h2>
<h4>{{ item.price | currency }}</h4>
<h4>Qty {{ item.qty }}</h4>
<md-list>
<h2 class="md-title" style="color:#3F51B5;">How Many Would You Like?</h2>
<md-divider></md-divider>
<md-list-item layout="row">
<md-slider flex md-primary ng-model="item.qty" step="1" min="1" max="5" aria-label="qty">
</md-slider>
</md-list-item>
</md-list>
<md-list>
<h2 class="md-title" style="color:#3F51B5;">Choose Your Size</h2>
<md-divider></md-divider>
<md-list-item layout="row" ng-repeat="size in options.results">
<p>{{ size.name }}</p>
<span flex></span>
<p>{{ size.price | currency }}</p>
<md-checkbox aria-label="size set"
class="md-accent"
ng-model="size.active">
</md-checkbox>
</md-list-item>
</md-list>
<md-list>
<h2 class="md-title" style="color:#3F51B5;">Choose Your Flavor</h2>
<md-divider></md-divider>
<md-list-item layout="row" ng-repeat="flavor in options.results">
<p>{{ flavor.name }}</p>
<span flex></span>
<p>{{ flavor.price | currency }}</p>
<md-checkbox aria-label="flavor set"
class="md-accent"
ng-model="flavor.active">
</md-checkbox>
</md-list-item>
</md-list>
</md-card-content>
<md-action-bar layout="row"
layout-align="end center">
<md-button class="md-fab md-accent fab"
aria-label="Remove From Cart"
ng-click="remove(item);showRemovedToast();"
ng-class="{active:item.active}">
<md-icon md-svg-src="img/icons/remove.svg"></md-icon>
</md-button>
</md-action-bar>
</md-card>
我能够从第一个JSON中检索数据，但不能从第二个JSON中检索数据。我真的很感激任何帮助。
编辑：感谢Gaurav Sachan，我越来越近了。这是一个描述我当前问题的掠夺者： http://plnkr.co/edit/AmOLsR2rLtco3x9g2q73现在的问题是每个菜单项都会重复大小和风格。
答案 0 :(得分：2)
你需要写而不是代替
<md-card ng-repeat="item in items.results | filter:true">
<img ng-src="{{item.img}}"
class="md-card-image"
alt="">
<md-card-content class="content">
<h2 class="md-title"><div ng-bind-html="item.name"></div></h2>
<h4>{{ item.price | currency }}</h4>
<h4>Qty {{ item.qty }}</h4>
<md-list>
<h2 class="md-title" style="color:#3F51B5;">How Many Would You Like?</h2>
<md-divider></md-divider>
<md-list-item layout="row">
<md-slider flex md-primary ng-model="item.qty" step="1" min="1" max="5" aria-label="qty">
</md-slider>
</md-list-item>
</md-list>
<md-list>
<h2 class="md-title" style="color:#3F51B5;">Choose Your Size</h2>
<md-divider></md-divider>
<md-list-item layout="row" ng-repeat="size in options.results.sizes">
<p>{{ size.name }}</p>
<span flex></span>
<p>{{ size.price | currency }}</p>
<md-checkbox aria-label="size set"
class="md-accent"
ng-model="size.active">
</md-checkbox>
</md-list-item>
</md-list>
<md-list>
<h2 class="md-title" style="color:#3F51B5;">Choose Your Flavor</h2>
<md-divider></md-divider>
<md-list-item layout="row" ng-repeat="flavor in options.results.flavors">
<p>{{ flavor.name }}</p>
<span flex></span>
<p>{{ flavor.price | currency }}</p>
<md-checkbox aria-label="flavor set"
class="md-accent"
ng-model="flavor.active">
</md-checkbox>
</md-list-item>
</md-list>
</md-card-content>
<md-action-bar layout="row"
layout-align="end center">
<md-button class="md-fab md-accent fab"
aria-label="Remove From Cart"
ng-click="remove(item);showRemovedToast();"
ng-class="{active:item.active}">
<md-icon md-svg-src="img/icons/remove.svg"></md-icon>
</md-button>
</md-action-bar>
答案 1 :(得分：0)
我想你想重复花的循环所以而不是选项使用item.flower