Angular JS選擇標記模型提供了一個空白選項問題

使用ng-model和ng-options屬性我綁定了select html標記。它正確綁定選項中的所有數據，但一個空選項首先與「」綁定。我想刪除這個空選項採用了棱角分明Angular JS選擇標記模型提供了一個空白選項問題

<select class="ng-pristine UserGroups selectGroupClass" ng-model='groupList' required ng-options='item.name for item in groupOptions track by item.name'></select>

$scope.groupOptions = [{ name: "What's Hot", value: 'latest' }, { name: 'Trending', value: 'popular' }];

來源

2016-06-09 user1292807

如何groupOptions看起來像 –

按部就班地進行，只是幫助與數組排序，並防止陣列重複項目的內部角。選項的值由第一個參數定義（在您的案例項目中）。如果你希望它是由id，那麼你應該使用項目作爲item.name項目在groupOptions

來源

2016-06-09 13:16:53 SuperComupter

你能提供更多的代碼如。您要在選擇標記中顯示的對象 – SuperComupter

我更新了代碼，請檢查更新後的代碼。 – user1292807

其中一個項目有一個空白的名字是我能想到的！如果可能，請驗證如果可能，請使用item.someOtherproperty來調試:)

來源

2016-06-09 13:39:50 insanevirus

當ng-model引用的值不存在於一組傳遞給ng-選項。

如果你想使用的角度選擇在控制器的初始值刪除此空選項，

$scope.groupList = $scope.groupOptions[0];

請檢查工作示例：Here

您可以添加

<option style="display:none" value="">select a type</option>

在HTML

<select class="ng-pristine UserGroups selectGroupClass" ng-model='groupList' required ng-options='item.name for item in groupOptions track by item.name'> 
    <option ng-hide="true" value="">Select a Type</option> 
</select>

請點擊這裏工作示例：Demo for 2nd option

來源

2016-06-09 13:46:11 User2

嘗試這種解決方案

<select ng-model="selected" ng-options="item as item.name for item in groupOptions"> 
    <option value="">Choose</option>} 
    </select> 
<div data-ng-bind="selected.name"></div>

來源

2016-06-09 14:00:05 SuperComupter

回答

相關問題