AngularJS - опция выбора по умолчанию для выпадающего меню

Question

Я новичок в AngularJS. Сейчас я следующие два фильтра применяются на сайте электронной коммерции:

      <div ng-show="user.ShipMethod != null && shippers && orderShipAddress.AddressName != 'BIG'" " ng-class="{'view-form-select': !currentOrder.LineItems[0].ShipperName, '': currentOrder.LineItems[0].ShipperName }"> 
           <label ng-class="{required: !currentOrder.IsMultipleShip() && user.ShipMethod != null}" ng-show="currentOrder.LineItems[0].ShipperName || !currentOrder.IsMultipleShip() && user.ShipMethod != null">{{('Shipping' | r) + ' Method' | xlat}}</label> 
           <select class="form-control" ng-change="updateShipper()" name="shipMethod" 
             ng-model="currentOrder.LineItems[0].ShipperName" 
             ng-show="user.ShipMethod.ShipperSelectionType == 'UserDropDown'" 
             ng-options="shipper.Name as (shipper.Name + ' ' + (shipper.ShippingRate.Price | currency | xlat)) for shipper in shippers | filter: { Name: '!Pick-Up at BIG'}" 
             ng-required="!currentOrder.IsMultipleShip() && user.ShipMethod != null" > 

            <option value=""></option> 
           </select> 
           <i class="fa fa-truck"></i> 
          </div> 

          <div ng-show="user.ShipMethod != null && shippers && orderShipAddress.AddressName == 'BIG'" ng-class="{'view-form-select': !currentOrder.LineItems[0].ShipperName, '': currentOrder.LineItems[0].ShipperName }"> 
           <label ng-class="{required: !currentOrder.IsMultipleShip() && user.ShipMethod != null}" ng-show="currentOrder.LineItems[0].ShipperName || !currentOrder.IsMultipleShip() && user.ShipMethod != null">{{('Shipping' | r) + ' Method' | xlat}}</label> 
           <select class="form-control" ng-change="updateShipper()" name="shipMethod" 
             ng-model="currentOrder.LineItems[0].ShipperName" 
             ng-show="user.ShipMethod.ShipperSelectionType == 'UserDropDown'" 
             ng-options="shipper.Name as (shipper.Name + ' ' + (shipper.ShippingRate.Price | currency | xlat)) for shipper in shippers | filter: { Name: 'Pick-Up at BIG'}" 
             ng-required="!currentOrder.IsMultipleShip() && user.ShipMethod != null" > 
            <option value=""></option> 
           </select> 
           <i class="fa fa-truck"></i> 
          </div> 
         </div> 

Мой контроллер расположен здесь: https://big.four51ordercloud.com/test0530/js/directives/ordershipping.js

В мой контроллер, я придумал это, чтобы установить по умолчанию в раскрывающемся меню , но я не уверен, куда его поместить в функцию updateShipper(). Я хочу, чтобы он был по умолчанию, если в раскрывающемся меню есть только один параметр. Прямо сейчас пользователю необходимо вручную выбрать его, если есть 1 вариант, но могут быть заполнены другие параметры, в зависимости от того, выполняется ли условие для другого фильтра. Первый фильтр, который вы видите, всегда дает несколько вариантов в раскрывающемся списке, а второй - всегда дает только один вариант - вариант «Pick-Up at BIG».

$scope.currentOrder.LineItems[0].ShipperName = $scope.shippers[0]; 

Answer 1

Используйте ng-model для установки значения по умолчанию для элемента списка. Всякий раз, когда вы выбираете пункт переменная нг-модель, которую вы установили будет upadte

См example

<select ng-options="p for p in animal" 
      ng-model="selectedanimal"></select>