AngularJS ng-repeat array with unique $scope variables per item

Question

So I am building a food order form and I have a list of options that need to be attached to the individual item index and not to the parent.. As of right now everything works but when i add an option to one product in the array all products have the same value added... ie.. if i choose the vanilla option for latte all drinks in the ng-repeat array will have the vanilla option set to true.. here is what i have..

first here is the html markup of the 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 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 items all with an array of options

here is the factory that retrieves the 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 lastly 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');
  });

  });

I know this is a little confusing to follow but i tried to explain the issues as best i could.. thanks for taking a look..

Fals · Accepted Answer · 2015-04-28 22:55:47Z

3

You should put the flavor model inside the item, not a general model as you are doing. The way you are doing the item from the list of options.results has the active one, then It will change every selection that uses the 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>

edited Apr 28, 2015 at 22:55

answered Apr 28, 2015 at 22:45

Fals

6,8394 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Chris G Over a year ago

ok i just tried that that set all the flavors for that item true not just the one checked...

Fals Over a year ago

@ChrisG updated the answer... I didn't notice that you have multiple flavors.

Chris G Over a year ago

ok that works, answer accepted and i never thought about doing it like that... now i do have a question about this way though... all these values will be stored in the $scope item.flavor[$index].. how would i go about getting all those values together to update the price... originally i was thinking of setting the active boolean to true and be able to get those by using a filter..

Fals Over a year ago

@ChrisG just use a filter and update this ones that you have selected for every item. You have the entire flavor inside the $scope item.flavor[$index], including the price :)

Chris G Over a year ago

<span ng-repeat="flavor in item.flavor | filter:true">{{flavor.name}}</span>

|

Collectives™ on Stack Overflow

AngularJS ng-repeat array with unique $scope variables per item

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related