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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |