每个AngularJS ng-repeat数组项需要具有唯一的$scope变量

Question

每个AngularJS ng-repeat数组项需要具有唯一的$scope变量

angularjsparse-platformangularjs-scopeangularjs-ng-repeat

4

所以我正在构建一个食品订购表单，我有一份选项清单需要附加到各个项目索引而不是父级。目前一切正常，但当我向数组中的一个产品添加选项时，所有产品都会添加相同的值...即，如果我选择拿铁的香草选项，则ng-repeat数组中的所有饮料都将设置为true的香草选项...这是我的代码。

首先，这是选项视图的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>
              {{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>

您可以看到，我有一组具有选项数组的项目数组。

这是从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');
  });

  });

我知道这可能有点难以理解，但我尽力了最好地解释了问题。感谢您的查阅。

- Chris G

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fals · Accepted Answer

您应该将口味模型放在item中，而不是像您正在做的那样使用通用模型。您从options.results列表中获取项目的方式具有活动状态，然后它将更改每个使用options.results的选择。更改为：

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