Избавиться от пустой записи в теге select

Question

У меня есть несколько элементов, которые получают свои данные из объекта Json и заполняют его с помощью углового.

<select ng-model="MyCtrl.cargoList"> 
    <option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option> 
</select> 

И всякий раз, когда я загружаю форму, я получаю что-то вроде этого в моей консоли:

<select ng-model="MyCtrl.cargoList"> 
    <option value="? object:25 "?></option> 
    <option value="">Gloves</option> 
    <option value="">Jacket</option> 
    <option value="">Shoes</option> 
</select> 

я могу получить значения появляться просто отлично, но я не могу показаться, чтобы избавиться от самый первый вариант. Я не возражаю против окна выбора, показывающего самый первый элемент в списке, но я не хочу, чтобы это была пустая строка. Как я могу избавиться от него?

Answer 1

Вы должны выбрать 1-й вариант по умолчанию на ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" & ng-model имя не должно быть таким же, как и у вашего cargoList.

Markup

<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name"> 
    <option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option> 
</select> 

Demo Plunkr

Answer 2

Используйте нг-опции вместо нг-повтора

<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select> 

Вы можете настроить на наклейках/значения больше, если вы хотите, обратитесь к документации здесь - https://docs.angularjs.org/api/ng/directive/ngOptions

Вы можете нг-инициализации, или установить первое значение для DEFUALT, что-то вроде

MyCtrl.selectedListItem = MyCtrl.cargoList[0] 

Итак, если вы хотите функцию обнаружения вы изменили значение избранных вы будете использовать нг-изменения как так:

<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select> 

В контроллере

$scope.selectChanged = function(){ 
//apply your logic 
}; 

Answer 3

Использование ngOption<option>

Атрибут ngOptions может быть использован для динамического создания списка <option> элементов для <select> элемента с использованием массива или объект, полученный путем оценки выражения понимания ngOptions.

я использовал следующее выражение

этикетки для значения в массиве

HTML

<select ng-model="MyCtrl.cargo" ng-options="cargo.name for cargo in MyCtrl.cargoList"> 
</select> 

и в контроллере набор модели значение в качестве первого элемента списка

this.cargo = this.cargoList[0] 

Также обратите внимание: вы можете использовать MyCtrl.cargoList как модель, так и массив. Поэтому вы должны использовать другую переменную для хранения значения модели.