Angular JS - 在Ng重复中选择由Ng选项生成的选项

I've been trying to build an online cart/store in Angular but am having trouble with having people being able to select how many of each item they want.

我一直在尝试在Angular中建立一个在线购物车/商店,但是让人们能够选择他们想要的每件商品中有多少都有问题。

The ng-options works and the default is set correctly using ng-model. It's in an ng-repeat. But for some reason the first time I pick any option in the <select> every <select> option (default) gets wiped. Why does this behavior occur? I've made a plunk so you can see what I mean.

ng-options工作,使用ng-model正确设置默认值。这是一个ng-repeat。但由于某种原因,我第一次选择选项(默认)都被擦除。为什么会出现这种情况?我做了一个插件,你可以看到我的意思。

http://plnkr.co/edit/6CM0frKnhuzvfu52H9GZ?p=preview

Code

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];
}]);

3 个解决方案

#1

your code is fine, using track by and object for ng-model in your case is correct, just change quantity to quantityOption in your ng-options:

您的代码很好,在您的情况下使用track by和object for ng-model是正确的,只需在ng-options中将数量更改为quantityOption:

ng-options="quantityOption as quantityOption.value for quantityOption in quantityOptions track by quantityOption.value"

otherwise, selection.selected will be assigned quantity variable, which is undefined

否则,selection.selected将被赋予数量变量,这是未定义的

#2

I tried this in a public fork of your plunker, seemed to fix it. You were doing some funky stuff in that select element declaration and the $scope. This way they all start as 0, and changing one doesn't change the others.

我在你的捡拾器的公共叉子里试过这个,好像修好了。你在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>

#3

Example:

<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' }
   ];
});

Just for your reference how ng-model works & Select using angular.

仅供参考ng-model的工作原理和使用角度选择。

The above will allow you to select an entire object into 2. $scope.selectedName directly.

以上将允许您直接选择整个对象为2. $ scope.selectedName。

2.With Angular, you don't need to worry about what's in your option tag. Let Angular handle that, you should only care about what's in your model in your scope.

2.使用Angular,您无需担心选项标签中的内容。让Angular处理,您应该只关心范围内模型中的内容。

#1