0

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];
2
  • Question is not clear to me. Do u want to set default value for a list item? Commented Jun 13, 2015 at 17:05
  • Sorry; yes...default value for list. Commented Jun 13, 2015 at 17:09

1 Answer 1

3

Use ng-model to set default value for the list item. Whenever you select an item the ng-model variable you have set will upadte

See example

<select  ng-options="p for p in animal"
            ng-model="selectedanimal"></select>
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.