AngularJS在使用ng-repeat的html select中包含一個空選項-帶有Angularjs 1.1.5的Umbraco后端

Question

如標題所示，當我使用ng-repeat而不是ng-options時，我在HTML中得到一個空選項。 我使用ng-repeat而不是ng-options的原因是能夠根據其值在每個選項上設置一個類。 我嘗試將指令與ng-options結合使用，但未達到預期的效果。 問題不在於您沒有從生成的HTML中看到那樣設置默認的選定值。 我懷疑empty選項來自select ng-model，但我不確定。

我的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，則結果仍然相同。

我正在將Umbraco版本7.3.5后端與Angularjs版本1.1.5一起使用。

Answer 1

初始化selectedProduct.code ，它將從列表中消除空白選項。

初始化對象

$scope.selectedProduct = {};

將默認設置為列表

$scope.productsForPriceList.YourObjectKey.IsDefault = true;

將此行代碼添加到Controller中以初始化您的選項

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

您需要將依賴項$filter添加到控制器