Question

我正在使用ng-repeat来渲染具有不同值和文本的选项，并设置默认值。但是，再次使用angular添加一个空的未定义选项。

<select ng-model="newItem.financial_year_id" required style="min-width:180px;">
   <option ng-repeat="financial in account_year" value="{{financial.id}}" ng-selected="financial.status=='Active'">{{financial.financial_year}}</option>
</select>

现在选择了活动的一个，但仍然呈现空选项。

Answer 1

当ng-model引用的值不存在于传递给ng-options的一组选项中时，会生成空选项。

您可以在stackoverflow上找到完整的答案+示例。这里是link

<强>更新

这是一个例子：

 <select ng-model="newItem.financial_year_id" required style="min-width:180px;">
   <option ng-repeat="financial in account_year" value="{{financial.id}}" ng-selected="financial.status=='Active'">{{financial.financial_year}}</option>
</select>

控制器中的

：

$scope.newItem={};
$scope.account_year=[{id:1,financial_year:"2013-2014",status:"Active"},
                     {id:2,financial_year:"2014-2015",status:"Inactive"}] 
//remove empty option
$scope.newItem.financial_year_id=$scope.account_year[0].id;

直播示例： http://jsfiddle.net/choroshin/5YDJW/7/

Answer 2

请尝试ng-options：

<select ng-model="selectedFinancial" ng-options="c.financial_year for c in account_year"
        required style="min-width:180px;">
</select>

DEMO

您应该考虑重新设计您的模型以使用ng-options。当我们使用<select>时，只有一个选定的项目，此项目应该是引用list =＆gt;中的项目的$scope的属性。对于所有对象，我们不需要为"active"和"inactive"复制另外一个属性。

当有超过1个选定项目时，您当前的模型设计是有意义的，但如果有超过1个，我们应该使用复选框列表而不是<select>

如果您想与Id绑定，请尝试以下操作：

<select ng-model="selectedFinancialId" ng-options="c.id as c.financial_year for c in account_year"
        required style="min-width:180px;">
</select>

DEMO

Answer 3

Ng-option也是一个好方法。但如果你真的想要ng-repeat那么就这样使用。

  $scope.newItem.financial_year_id=" ";

启动控制器时初始化变量。如果你没有初始化它，那么它需要未定义。所以第一个空值存在。

AngularJS：删除角度ng-repeat中的空选择选项

3 个答案: