加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:14:36 所属栏目:安全 来源:网络整理
导读:所以我正在构建一个食品订单表格,我有一个选项列表,需要附加到单个项目索引而不是父项.截至目前,一切都有效,但当我在数组中添加一个选项时所有产品都有相同的增值…即..如果我选择拿铁的香草选项所有饮料在ng-repeat阵列将香草选项设置为真..这是我有… 首先
所以我正在构建一个食品订单表格,我有一个选项列表,需要附加到单个项目索引而不是父项.截至目前,一切都有效,但当我在数组中添加一个选项时所有产品都有相同的增值…即..如果我选择拿铁的香草选项所有饮料在ng-repeat阵列将香草选项设置为真..这是我有…

首先是选项视图的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');
  });

  });

我知道这有点令人困惑,但我试图尽可能地解释这些问题..谢谢你看看..

解决方法

你应该将味道模型放在项目中,而不是像你一样做的一般模型.您从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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读