Question

正如标题所示，当我使用ng-repeat代替ng-options时，我的HTML中会出现空白选项。我使用ng-repeat而不是ng-options的原因是能够根据每个选项的值来设置每个选项的类。我尝试使用带有ng-options的指令但是我没有达到预期的结果。问题不在于未设置默认选定值，您可以从生成的HTML中看到。我怀疑空选项来自选择模型，但我不确定。

我的HTML看起来像这样：

        <select ng-model="selectedProduct.code" ng-init="selectFirstProduct()" ng-change="getArticle()" size="8">
            <option ng-selected="{{product.code == selectedProduct.code}}" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product )" value="{{product.code}}">{{product.name}}</option>
        </select>

这导致HTML看起来像这样：

<select ng-model="selectedProduct.code" ng-change="getArticle()" size="8" class="ng-pristine ng-valid">
<option value="? string:200230 ?"></option>
<!-- ngRepeat: product in productsForPriceList -->
<option ng-selected="true" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="200230" class="ng-scope ng-binding" selected="selected">Product 1</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300025" class="ng-scope ng-binding">Product 2</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300206" class="ng-scope ng-binding">Product 3</option>

我使用ng-init="selectFirstProduct()"将selectedProduct.code设置为列表中的第一个值。但是，如果我在获取列表时省略了此代码并设置了selectedProduct.code，则结果仍然相同。

我使用Angularjs版本1.1.5的Umbraco 7.3.5后端。

Answer 1

初始化selectedProduct.code，它将从列表中删除空白选项。

初始化对象

$scope.selectedProduct = {};

将默认设置为列表

$scope.productsForPriceList.YourObjectKey.IsDefault = true;

将此行代码添加到Controller以初始化您的选项

$scope.selectedProduct.code = $filter('filter')($scope.productsForPriceList, {IsDefault: true})[0];

您需要将依赖项$filter添加到控制器

Angularjs在html select中使用ng-repeat包含一个空选项 - Umbraco后端使用Angularjs 1.1.5

1 个答案: