AngularJS: удалить пустую опцию выбора в angular ng-repeat
Я использую ng-repeat для визуализации параметров с различными значениями и текстом здесь, а также с настройкой по умолчанию. Но снова angular добавляет пустой параметр undefined.
<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>
Теперь активен активный, но пустой параметр все еще отображается.
Ответы
Ответ 1
Попробуйте 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>
, существует только один выбранный элемент, и этот элемент должен быть свойством $scope
, ссылающимся на элемент в списке = > нам не нужно дублировать еще 1 свойство с помощью "active"
и "inactive"
для всех объектов.
Ваш текущий дизайн модели имеет смысл, когда имеется более одного выбранного элемента, но если их больше 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
Ответ 2
Пустая опция генерируется, когда значение, указанное ng-model, не существует в наборе параметров, переданных в ng-options.
Вы можете найти полный ответ + пример в stackoverflow. здесь ссылка
UPDATE:
вот пример:
<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/
Ответ 3
Ng-option также является хорошим способом. Но если вы действительно хотите ng-repeat, тогда используйте вот так.
$scope.newItem.financial_year_id=" ";
Инициализировать переменную при запуске контроллера. Если вы не инициализируете его, то он принимает значение undefined. Итак, первое пустое значение присутствует.