So, I create a food order form, and I have a list of options that need to be linked to the index of individual products, and not to the parent. Everything works at the moment, but when I add an option to one product in an array, all products have the same added value ... i.e. if I choose the vanilla option for latte, all drinks in the ng-repeat array will have the vanilla parameter set to true .. that’s what I have ..
first here is the html markup of the parameter view
<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">{{ item.name }}</h2>
<h4>{{ item.price | currency }}</h4>
{{flavors(item)}}
<md-list>
<p class="md-subhead">Choose Your Flavor</p>
<md-divider></md-divider>
<md-list-item ng-repeat="option in options.results"
layout="row">
<p> {{ option.name }} </p>
<span flex></span>
<p> {{ option.price | currency}} </p>
<md-checkbox aria-label="option.active"
class="md-accent"
ng-model="option.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)"
ng-class="{active:item.active}">
<md-icon md-svg-src="img/icons/remove.svg"></md-icon>
</md-button>
</md-action-bar>
</md-card>
as you can see, I have an array of elements with many options
here is a factory that retrieves data from parse
app.factory('ParseData', function($http) {
var ParseFactory = {};
ParseFactory.getItems = function() {
return $http({method : 'GET',url : 'https://api.parse.com/1/classes/DrinkMenu/', headers:
{ 'X-Parse-Application-Id':xxx',
'X-Parse-REST-API-Key':'xxx'}})
.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':'xxx',
'X-Parse-REST-API-Key':'xxx'}})
.then(function(response) {
return response.data;
});
};
return ParseFactory;
});
and finally the controller
app.controller('AppController', function($scope, ParseData){
ParseData.getItems().then(function(data) {
$scope.items = data;
}).catch(function() {
alert('error');
});
ParseData.getOptions().then(function(data) {
$scope.options = data;
}).catch(function() {
alert('error');
});
});
, , . , ..