Question

一直在搜索Stackoverflow，并且有大量关于如何删除“可怕”的提示。选择下拉列表中的空（未定义）选项元素。但是，当我的代码看起来像这样时，我还没有找到答案：

- 视图 -

<form class="simple-mods">
<fieldset ng-repeat="modifier in modifiers">
    <label for="{{ modifier.id }}">{{ modifier.title }}</label>
        <select name="" id="{{ modifier.id }}"  ng-model="mods[modifier.id]" name="modifier[{{ modifier.id }}]" ng-mod="{{ modifier.title }}">
           <option value="{{ variation.id }}" ng-repeat="variation in modifier.variations">{{ variation.title }}</option>
        </select>

</fieldset>

<fieldset>
    <button ng-click="addCart()" ng-if="!addStatus" class="btn btn-success"  translate>Add to cart</button>
    <button ng-if="addStatus" class="btn btn-warning" ng-bind-html="addStatus">{{ addStatus }}</button>
</fieldset>
</form>

- 控制器 -

.controller('ProductCtrl', function ($scope, $rootScope, moltin, $timeout, product) {

var productId  = product.id,
    qty = 1,
    mods = {};

$scope.product = product;
$scope.addStatus = null;
$scope.modifiers = product.modifiers;

});

如果有人能提供帮助，我将非常感激。

@BETTY它似乎不起作用。我附上了2个截图

Screen shot 3

Screen shot 4（值现在是一个字符串）

@betty

<fieldset ng-repeat="modifier in modifiers" ng-init="mod[modifier.id] = modifier.variations[0].id">
    <label for="{{ modifier.id }}">{{ modifier.title }}</label>
        <select id="{{ modifier.id }}" ng-model="mods[modifier.id]" ng-options="variation.id as variation.title for variation in modifier.variations">
            <option></option>
        </select>
</fieldset>

Answer 1

尝试清理控制器中的modifier.variations，删除modifier.variations中未定义的元素

$scope.modifier.variations = $scope.modifier.variations.filter(function(n){ return n != undefined });

您需要在控制器中注入$scope。

Answer 2

您需要使用=> mods[modifier.id]或在控制器中设置ng-model来设置ng-model（ng-init）..

此解决方案使用ng-init将默认值设置为第一个变体ID。我还删除了您不需要的所有内容并使用了ng-options（减少了一些HTML;））。

<fieldset ng-repeat="modifier in modifiers" ng-init="mods[modifier.id]=modifier.variations[0].id">
  <label for="{{ modifier.id }}">{{ modifier.title }}</label>
  <select id="{{ modifier.id }}" ng-model="mods[modifier.id]" ng-options="variation.id as variation.title for variation in modifier.variations">
    <option></option>
  </select>
</fieldset>

我还建议添加一个空的option-tag，原因如下：ng-model is getting wrong value from dropdown

并且您需要在控制器中使用$scope.mods = {};而不是var mods = {};，因为您在HTML中使用mods！

也许您还需要使用track by variation.id，以便可以正确检查所选值（ng-model和选项值）。我回答了类似的问题，track by就是答案，请参阅https://stackoverflow.com/a/32999399/595152;）

Angular Empty选项（动态输入）

2 个答案: