AngularJS NG-重复阵列，每件独特的$范围变量 [英] AngularJS ng-repeat array with unique $scope variables per item

问题描述

所以我建立一个食品订单，我有需要连接到单个项目的索引，而不是母公司的选项列表。由于现在一切正常，但是当我添加一个选项，以一个产品阵列中的所有产品都添加了相同的值...即..如果我选择拿铁香草选项NG重复阵列中的所有饮料将有设置为true的香草期权..这里是我..

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..

先在这里是选项的HTML标记视图

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;

}); 

和最后控制器

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..

推荐答案

您应该把味道模型项内，还不如你正在做的一般模型。您从 options.results 列表做项目的方式有活跃的一个，那么它会改变每一个使用 options.results选择。更改为：

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>

或

<md-checkbox aria-label="option.active" class="md-accent" 
 ng-model="item.flavor[option.name]"></md-checkbox>

这篇关于AngularJS NG-重复阵列，每件独特的$范围变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！