我一直在尝试在Angular中建立一个在线购物车/商店,但我却无法让人们选择他们想要的每件商品中的多少。
ng-options工作,使用ng-model正确设置默认值。它是在ng-repeat中。但出于某种原因,我第一次选择<select>
中的每个<select>
选项(默认)中的任何选项都会被删除。为什么会出现这种情况?我做了一个插件,你可以看到我的意思。
http://plnkr.co/edit/6CM0frKnhuzvfu52H9GZ?p=preview
代码
HTML:
<body id="page-top" class="is-loading" ng-controller="bCtrl">
<div class="form-group" ng-repeat="(key, value) in breads | groupBy: 'Type'">
<label class="itemTitle">{{key}}</label>
<div ng-repeat="bread in value">
<label for="exampleInputPassword1">{{bread.Name}}</label>
<select name="@{{bread.Name}} quantity" ng-options="quantity as quantityOption.value for quantityOption in quantityOptions track by quantityOption.value" ng-model="selection.selected"></select>
<p class="price">{{bread.Price|currency}} {{bread.details}}</p>
</div>
</div>
</body>
JAVASCRIPT:
var app = angular.module('fook', ['angular.filter']);
app.controller('bCtrl', ['$scope',function($scope) {
$scope.breads = [{"id":19,"Name":"Apple Pie","Type":"Pies","Picture":"","Price":"3.95","PriceWholesale":"23.95","DaysNotAvailable":"","TwoBuisnessDays":"True","canShip":"False","minAmount":0,"details":"","weight":"","holiday":"Thanksgiving","quantity":0,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},{"id":20,"Name":"Old Fashioned Pumpkin Pie","Type":"Pies","Picture":"","Price":"14.95","PriceWholesale":"14.95","DaysNotAvailable":"","TwoBuisnessDays":"True","canShip":"False","minAmount":0,"details":"","weight":"","holiday":"Thanksgiving","quantity":0,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},{"id":21,"Name":"Peasant White Rolls","Type":"Rolls","Picture":"","Price":"4.95","PriceWholesale":"4.95","DaysNotAvailable":"","TwoBuisnessDays":"True","canShip":"False","minAmount":0,"details":"per 1\/2 dozen.","weight":"","holiday":"Thanksgiving","quantity":0,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},{"id":22,"Name":"Honey Whole Wheat Rolls","Type":"Rolls","Picture":"","Price":"4.95","PriceWholesale":"4.95","DaysNotAvailable":"","TwoBuisnessDays":"True","canShip":"False","minAmount":0,"details":"per 1\/2 dozen.","weight":"","holiday":"Thanksgiving","quantity":0,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},{"id":23,"Name":"Corn Rolls","Type":"Rolls","Picture":"","Price":"4.95","PriceWholesale":"4.95","DaysNotAvailable":"","TwoBuisnessDays":"True","canShip":"False","minAmount":0,"details":"per 1\/2 dozen.","weight":"","holiday":"Thanksgiving","quantity":0,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},{"id":24,"Name":"Cranberry Orange Rolls","Type":"Rolls","Picture":"","Price":"4.95","PriceWholesale":"4.95","DaysNotAvailable":"","TwoBuisnessDays":"True","canShip":"False","minAmount":0,"details":"per 1\/2 dozen.","weight":"","holiday":"Thanksgiving","quantity":0,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},{"id":25,"Name":"Cranberry Orange Roll Wreath","Type":"Roll Wreaths","Picture":"","Price":"20","PriceWholesale":"20","DaysNotAvailable":"","TwoBuisnessDays":"True","canShip":"False","minAmount":0,"details":"","weight":"","holiday":"Thanksgiving","quantity":0,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},{"id":26,"Name":"Peasant White Roll Wreath","Type":"Roll Wreaths","Picture":"","Price":"18","PriceWholesale":"18","DaysNotAvailable":"","TwoBuisnessDays":"True","canShip":"False","minAmount":0,"details":"","weight":"","holiday":"Thanksgiving","quantity":0,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},{"id":27,"Name":"Honey Whole Wheat Roll Wreath","Type":"Roll Wreaths","Picture":"","Price":"18","PriceWholesale":"18","DaysNotAvailable":"","TwoBuisnessDays":"True","canShip":"False","minAmount":0,"details":"","weight":"","holiday":"Thanksgiving","quantity":0,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"}]
$scope.selection={};
$scope.quantityOptions = [
{ value: 0 },
{ value: 1 },
{ value: 2 },
{ value: 3 },
{ value: 4 },
{ value: 5 },
{ value: 6 },
{ value: 7 },
{ value: 8 },
{ value: 9 },
{ value: 10 }
];
$scope.selection.selected=$scope.quantityOptions[0];
}]);
答案 0 :(得分:1)
您的代码很好,在您的案例中使用 track by 和 ng-model 的对象是正确的,只需在 ng-options中将数量更改为quantityOption :
ng-options="quantityOption as quantityOption.value for quantityOption in quantityOptions track by quantityOption.value"
否则,selection.selected将被分配数量变量,这是未定义的
答案 1 :(得分:0)
我在你的弹药的公共叉子里试过这个,好像修好了。你在select元素声明和$ scope中做了一些时髦的东西。这样他们都从0开始,而改变一个并不会改变其他人。
// Change these lines in your script
...
$scope.selected={};
...
$scope.selected=$scope.quantityOptions[0];
// Change this select element declaration
<select name="@{{bread.Name}} quantity"
ng-options="option as option.value for option in quantityOptions"
ng-model="selected"></select>
答案 2 :(得分:0)
示例:
<div ng-controller="ParentCtrl">
<select ng-model="selectedName" ng-options="item as item.name for item in items"></select>
<p>{{selectedName | json}}</p>
</div>
app.controller('ParentCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'Yes' },
{ id: 2, name: 'No' },
{ id: 3, name: 'Might be' }
];
});
仅供参考ng-model的工作原理&amp;选择使用角度。
2.使用Angular,您无需担心选项标签中的内容。让Angular处理,您应该只关心范围内模型中的内容。