Угловые нг-опции в выбор2 - настройки значения свойства

Question

У меня есть массив стран:

var countriesList: [ 
       {name: "Israel", code: "IL"}, 
       {name: "India", code: "IN"}, 
       {name: "Andorra", code: "AD"} 
      ] 

и массив выбранных стран:

selectedCountries: [ 
        { 
         country:"IL" 
        } 
       ] 

Я использую ВЫБ.2 для отбора стран. Я начал с нг-повтора для генерации <options/> тег:

<select 
    id="countriesList" 
    ui-select2 
    multiple 
    ng-model='data.selectedCountries' 
    data-placeholder='Choose or Search for Countries' 
    name='locations' 
    ng-change='geoTargetingChanged()'> 

     <option ng-repeat="country in data.countriesList" value="{{country.code}}">{{country.name}}</option>     
</select> 

этот метод работал хорошо, но это вызвало форму, чтобы быть $dirty прямо на старте. поэтому я начал использовать `нг-options- механизм (после прочтения this answer):

<select 
      id="countriesList" 
      ui-select2 
      multiple 
      ng-model='data.selectedCountries' 
      data-placeholder='Choose or Search for Countries' 
      name='locations' 
      ng-change='geoTargetingChanged()' 
      ng-options="country.code as country.name for country in data.campaignSettings.countriesList"> 
      <option></option> 
</select> 

Теперь проблема заключается в том, что стоимость предметов не код страны, то их индекс в массиве.

Я что-то не хватает?

Answer 1

Вот plunker.

Я не вижу ни одного вопроса, хотя я изменить формат selectedCountries быть массивом кодов стран (["IL", ...]) вместо структуры данных вы предоставили ([{country:"IL", ...}]).

Угловой тип сгенерирует параметры, используя индекс как значение, но значение ngModel будет содержать значение функции. Если вы делаете заявку формы с выбранным, вы должны использовать данные из ngModel вместо данных из выбранного в HTML. Если вам нужно поместить данные из выбора на странице в форме, вы можете поместить значения элемента выбора ngModel в скрытые элементы формы.

Answer 2

Если вы нормально с наличием выбранных элементов является зеркалом того, что в вашем countriesList так:

$scope.data.selectedCountries = [$scope.data.countriesList[0]]; 

ng-options="country as country.name for country in data.countriesList"> 

Тогда вот обновленный plunkr о том, как сделать то, что вам нужно: http://plnkr.co/edit/qE3SJm?p=preview

Если вместо этого вы просто хотите код страны, когда вы присваиваете его в selectedCountries, вы должны ссылаться на фактическое местонахождение оно находится в пределах массива страны:

$scope.data.selectedCountries = [$scope.data.countriesList[0].code]; 

ng-options="country.code as country.name for country in data.countriesList"> 

Другое plunkr: http://plnkr.co/edit/ysAatS?p=preview

Answer 3

попробовать это:

<select style="width: 100%" ui-select2="{multiple: true}" ng-model="countriesList" class="form-control select2" multiple style="width:300px"> 
    <option></option> 
    <option ng-repeat="country in countriesList" value="{{country}}">{{country}}</option> 
</select> 

предполагая структуру, как @rtcherry упоминается.