Search code examples
javascriptangularjshtml-selectng-optionsangularjs-ng-model

AngularJs - Set ng-model from collection property


I'm having this rather strange issue setting the ng-model for a select drop-down list.

The property value I'm using for ng-model seems to match an entry in the ng-options but ng-model always ends up as null.

This is the method that gets the orders:

orderService.getMerchantOrders(qs)
            .then(
            function (response) {
                $scope.isLoading = false;
                $scope.pagerService = new pagerService({
                    page: $scope.pagerService.page,
                    data: response.data.items,
                    total: response.data.total,
                    sortVars: response.data.sort,
                    pageSize: 5
                });
            },
            function (error) {
                if (error.status === 401) {
                    $window.location.href = $scope.returnUrl;
                } else {
                    //show error message
                    console.log(error);
                }
            });

Here's what pagerService.data looks like: enter image description here

The value of order.orderShippingMethod[0].shippingMethod is:

{"shippingMethodId":7,"carrierName":"Russian Post","carrierUrl":"http://www.russianpost.ru/tracking20/English.htm","orderShippingMethod":[]}

The select list values are: enter image description here

Thanks for any ideas. I'm very much a beginner with AngularJs so I feel it's something very simple I'm missing here!

<select class="form-control" name="carrierList"

ng-model="order.orderShippingMethod[0].shippingMethod"

ng-options="shippingMethod.shippingMethodId as shippingMethod.carrierName 
for shippingMethod in shippingMethods" required>

<option value="">Select Carrier</option>

</select>

Solution

  • Use the track by syntax for ngOptions instead of id as name:

    shippingMethod.carrierName for shippingMethod in shippingMethods track by shippingMethod.shippingMethodId
    

    See it demonstrated below:

    angular.module('myApp', [])
      .controller('ctrl', function($scope) {
        $scope.shippingMethods = [{
            "shippingMethodId": 7,
            "carrierName": "Russian Post",
            "carrierUrl": "http://www.russianpost.ru/tracking20/English.htm",
            "orderShippingMethod": []
          },
          {
            "shippingMethodId": 8,
            "carrierName": "Persian Post",
            "carrierUrl": "http://www.russianpost.ru/tracking20/English.htm",
            "orderShippingMethod": []
          }
        ];
        $scope.order = {
          orderShippingMethod: [{
            "shippingMethod": {
              "shippingMethodId": 8,
              "carrierName": "Persian Post",
              "carrierUrl": "http://www.russianpost.ru/tracking20/English.htm",
              "orderShippingMethod": []
            }
          }]
        };
      })
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="ctrl">
      <select class="form-control" name="carrierList" ng-model="order.orderShippingMethod[0].shippingMethod" ng-options="shippingMethod.carrierName 
    for shippingMethod in shippingMethods track by shippingMethod.shippingMethodId" required>
    
    <option value="">Select Carrier</option>
    
    </select> 
    <div>
    order.orderShippingMethod[0].shippingMethod: {{ order.orderShippingMethod[0].shippingMethod }}</div>
    </div>