Question

我一直在尝试在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];
}]);

Answer 1

您的代码很好，在您的案例中使用 track by 和 ng-model 的对象是正确的，只需在 ng-options中将数量更改为quantityOption ：

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

否则，selection.selected将被分配数量变量，这是未定义的

Answer 2

我在你的弹药的公共叉子里试过这个，好像修好了。你在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>

Answer 3

示例：

<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. $ scope.selectedName。

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

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

3 个答案: