AngularJS：拆下角NG重复空选择选项 [英] AngularJS : Remove empty select option in angular ng-repeat

问题描述

我使用的NG-重复在这里呈现不同的价值和文本选项，并且还设置默认one.But再次角增加了一个空不确定选项。

I am using ng-repeat to render options with different value and text here, and also setting the default one.But again angular adds an empty undefined option.

<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>

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

Now the active one is selected but the empty option still rendering.

推荐答案

尝试 NG-选项而不是：

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

演示

您应该考虑重新设计你的模型一样，使用 NG-选项。当我们使用＆LT;选择＆GT; ，只有1所选的项目，这个项目应该是 $范围属性在引用列表中的项目=>我们并不需要复制1更多的财产与活跃和不活跃的所有对象。

You should think about redesigning your model like that to use ng-options. When we use <select>, there is only 1 selected item and this item should be a property of $scope referencing an item in the list => we don't need to duplicate 1 more property with "active" and "inactive" for all objects.

您当前的模型设计是有道理的，当有超过1所选的项目，但如果有大于1，我们应该使用复选框，而不是℃的列表，选择＆GT;

Your current model design makes sense when there are more than 1 selected item, but if there are more than 1, we should use a list of checkboxes instead of <select>

如果您想与ID绑定，试试这个：

If you want to bind with Id, try this:

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

演示

这篇关于AngularJS：拆下角NG重复空选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！