AngularJS ng-repeat 数组，每个项目具有唯一的 $scope 变量 [英] AngularJS ng-repeat array with unique $scope variables per item

问题描述

所以我正在构建一个食品订单表，我有一个需要附加到单个项目索引而不是父项的选项列表..截至目前一切正常，但是当我为一个产品添加一个选项时在数组中，所有产品都具有相同的附加值......即.. 如果我为拿铁选择香草选项，ng-repeat 数组中的所有饮料都将香草选项设置为 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

这里是从 Parse 中检索数据的工厂

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

推荐答案

您应该将风味模型放在 item 中，而不是像您正在做的一般模型.你从 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-repeat 数组，每个项目具有唯一的 $scope 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！