Chris G Chris G - 3 months ago 21
AngularJS Question

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

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

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