I am new to AngularJS. Right now I have the following two filters applied on an e-commerce site:
<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>
My controller is located here: https://big.four51ordercloud.com/test0530/js/directives/ordershipping.js
In my controller, I came up with this to set the default drop down menu option, but I am not sure where to put it in the updateShipper() function. I want it to default if there is only 1 option in the drop down menu. Right now, the user has to manually select it if there is 1 option, but, other options could populate, depending upon if the condition for the other filter is met. The first filter you see would always yield multiple options in the drop down, while the second one, would always yield just 1 option - the "Pick-Up at BIG" option.
$scope.currentOrder.LineItems[0].ShipperName = $scope.shippers[0];