AngularJs

Question

我在为 select 下拉列表设置 ng-model 时遇到了这个相当奇怪的问题。

我为 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":[]}

select 列表值为：

感谢任何想法。我是 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>

Answer 1

使用 track by 语法 ngOptions 而不是 id 作为 name:

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>

AngularJs - 从集合属性中设置 ng-model

AngularJs - Set ng-model from collection property

javascript

html-select

ng-options

angularjs-ng-model