AngularJs - 從集合屬性設置模型

我有這個相當奇怪的問題，爲選擇下拉列表設置ng-model。AngularJs - 從集合屬性設置模型

我使用ng-model的屬性值似乎匹配在ng-options但ng-model條目最終總是爲null。

這是獲得訂單的方法：

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

這裏的pagerService.data樣子：

的order.orderShippingMethod[0].shippingMethod值是：

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

選擇列表值爲：

感謝您的任何想法。我非常喜歡AngularJs所以我覺得這很簡單我很想念這裏！

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

來源

2017-07-10 Mike Anderson

您應該添加一些代碼，說明您目前圍繞您提供的代碼段的內容。您應該顯示$ scope.order的定義位置，以及$ scope.order.orderShippingMethod（s）的定義位置。 – alexhuang

好主意，更新了更多細節！ –

通過語法ngOptions，而不是ID使用的軌道作爲名：

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

看到它下面演示：

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>

來源

2017-07-10 22:13:58

美麗！我知道這很簡單，謝謝@Sam Onela！ –

AngularJs - 從集合屬性設置模型

回答

相關問題