AngularJS assign values to items in ng-repeat array using ng-model and retrieve those values

Question

This is turning out a lot harder than expected.

I have two arrays: one for products and one for options. Each Product should have its own array of options.

The problem starts when I try to give each product its own options array with its own scope, meaning when one option is selected it only pertains to that product's $scope and not any other.

It was suggested I add [$index] to the array, but this doesn't seem to work. I can't retrieve specific values in this array.

The options array has these ids: (name,price,active). Before I was trying to do this by setting the active boolean to true and filtering those results... but either way would be fine, in a nutshell i need to retrieve the name and price values of the chosen option...

This wasn't the easiest to explain so bear with me... thanks for looking.

Option view 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">{{ item.name }}</h2>
          <h4>{{ item.price | currency }}</h4>
          <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="item.flavor[$index]">
                  </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>

Here is the order html where i am trying to use those values..

<md-card>
    <md-card-content>
        <md-list>
            <span class="md-subhead">Review Order</span>
            <md-divider></md-divider>
            <md-list-item ng-repeat="item in items.results | filter:true" 
                          layout="row">
                <span>{{ item.name }}</span>
                <span flex></span>
                <span>{{ item.price | currency}}</span>
                <span ng-repeat="flavor in item.flavor | filter:true">
                    {{flavor}}
                </span>          
            </md-list-item>
            <md-divider></md-divider>
            <md-list-item layout="row">
                <span>Order Total :</span>
                <span flex></span>
                <span>{{ total(items.results) | currency}}</span>
            </md-list-item>
        </md-list>   
    </md-card-content>
</md-card>

Answer 1

Instead of trying to use the ng-model directive you can create the following functions in your controller

$scope.addOption = function(item, opt) {
    var index = item.flavors.indexOf(opt);
    if(index > -1) {
        item.flavors.splice(index, 1);
    }
    else
        item.flavors.push(opt);
}

$scope.checkOption = function(item, opt) {
    return item.flavors.indexOf(option) > -1
}   

and change your html to

<md-checkbox aria-label="option.active"
           class="md-accent" 
            ng-checked="checkOption(item, option)"
           ng-click="addOption(item, option)">
</md-checkbox>

you can then access the flavors as follows

<div ng-repeat="flavor in item.flavors">[{{flavor.name}} : {{flavor.price}}] </div> 

You can test the idea here