parse.com - AngularJS ng-repeat array with unique $scope variables per item -
so building food order form , have list of options need attached individual item index , not parent.. of right works when add option 1 product in array products have same value added... ie.. if choose vanilla option latte drinks in ng-repeat array have vanilla option set true.. here have..
first here html markup of options 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 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 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 can see have array of items array of options
here factory retrieves data 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 lastly 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'); }); }); i know little confusing follow tried explain issues best could.. taking look..
you should put flavor model inside item, not general model doing. way doing item list of options.results has active one, change every selection uses options.results. change to:
<md-checkbox aria-label="option.active" class="md-accent" ng-model="item.flavor[$index]"></md-checkbox> or
<md-checkbox aria-label="option.active" class="md-accent" ng-model="item.flavor[option.name]"></md-checkbox>
Comments
Post a Comment