AngularJs - Set-ng-Modell von Sammlung Eigenschaft

Question

Ich habe dieses ziemlich seltsame Problem, die ng-model für eine Auswahl Dropdown-Liste.

Der Eigenschaftswert Ich bin für ng-model Verwendung scheint in der ng-options aber ng-model immer einen Eintrag anzupassen endet als null.

Dies ist die Methode, die die Aufträge bekommt:

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); 
       } 
      }); 

Hier ist, was pagerService.data wie folgt aussieht:

Der Wert order.orderShippingMethod[0].shippingMethod ist:

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

Die Auswahlliste Werte sind:

Danke für jede Idee. Ich bin sehr viel Anfänger mit AngularJs so ich fühle es ist etwas sehr einfaches Ich vermisse hier!

<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> 

Answer 1

Verwenden Sie die Spur von Syntax für ngOptions statt id als Name:

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

Sehen Sie es unten gezeigt:

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>