it-swarm.com.ru

AngularJS: удалить пустую опцию выбора в angular ng-repeat

Я использую 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>

Теперь активный выбран, но пустая опция все еще рендерится.

13
devo

Попробуйте вместо этого ng-options:

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

ДЕМО

Вы должны подумать о том, чтобы изменить свою модель таким образом, чтобы использовать ng-options. Когда мы используем <select>, есть только 1 выбранный элемент, и этот элемент должен быть свойством $scope, ссылающимся на элемент в списке => нам не нужно дублировать еще 1 свойство с "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>

ДЕМО

9
Khanh TO

Пустая опция генерируется, когда значение, на которое ссылается ng-model, не существует в наборе опций, передаваемых в ng-options.

Вы можете найти полный ответ + пример на stackoverflow. вот ссылка

Обновление:

вот пример:

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

19
Alex Choroshin

Нг-вариант тоже хороший способ. Но если вы действительно хотите ng-repeat, используйте следующее. 

  $scope.newItem.financial_year_id=" ";

Инициализируйте переменную при запуске контроллера. Если вы не инициализируете его, тогда оно будет неопределенным. Итак, первое пустое значение присутствует. 

0
Anbu