Как установить angularjs нг-повтор при выборе опции

Question

На данный момент у меня есть выбор, но мне нужно иметь собственный стиль для моих опций, который требует от меня немного изменить настройки.

На данный момент у меня есть

 <select ng-model="vm.selectedStation"
         ng-options="s.stationName for s in  vm.nearbyStations" .....>
 </select>

Теперь я изменяю его на

<select ng-model="vm.selectedStation">
    <option ng-repeat="s in vm.nearbyStations" value="{{s}}">            
        {{s.stationName}}
    </option>
</select>

Он показывает то же самое, но значение другое. Я требую, чтобы ng-модель была s. быть объектом, но вместо этого он выглядит как s.stationName Могу ли я спросить, как правильно установить значение

Answer 1

Используйте директиву ng-value:

<select ng-model="vm.selectedStation">
    ̶<̶o̶p̶t̶i̶o̶n̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶s̶ ̶i̶n̶ ̶v̶m̶.̶n̶e̶a̶r̶b̶y̶S̶t̶a̶t̶i̶o̶n̶s̶"̶ ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶s̶}̶}̶"̶>̶
    <option ng-repeat="s in vm.nearbyStations" ng-value="s">            
        {{s.stationName}}
    </option>
</select>

Интерполяция с фигурными скобками {{ }} преобразует выражение в строку. Директива ng-value оценивает выражение и сохраняет его тип.

Для получения дополнительной информации см.

• AngularJS ng-value Директива API Reference
• AngularJS <select> - Использование ngValue для привязки модели к массиву объектов

Answer 2

Просто используйте ng-value на каждом <option>, чтобы напрямую присвоить каждому компоненту vm.nearbyStations.

См. Пример использования ниже.

(В качестве отступления, ваш HTML кажется, имеет непарный </option>.)

angular
  .module('app', [])
  .controller('ctrl', function () {
    this.nearbyStations = [
      { stationName: 'a' },
      { stationName: 'b' },
      { stationName: 'c' },
    ];
  });

  
    {{ s.stationName }}
  
  selectedStation = {{ vm.selectedStation }}