Angular ng-options 选择未设置为初始值答案

【问题标题】：Angular ng-options select not being set to initial valueAngular ng-options 选择未设置为初始值
【发布时间】：2014-07-16 22:45:54
【问题描述】：

我正在发送一个 JSON 对象，以便在我的页面上初始化一些输入并选择值。该对象包含一个 ShipTo 属性。我希望用这个初始值填充下拉列表。由于某种原因，它没有填充，即使它们是同一个对象。我什至添加了 track by 以确保它正在根据 CompanyName 测试相等性（不确定这是否是 track by 的意思）这是我所拥有的：

JSON 对象：

{
    "AccountNumber": "12345",
    "Email": null,
    "CompanyName": "HK Electric",
    "Inactive": false,
    "PhoneNumbers": null,
    "ChildOfCustomer": "00000000-0000-0000-0000-000000000000",
    "Id": "a4aab309-321c-4b09-969c-073eb83b90ad",
    "ModifiedBy": null,
    "ModifiedOn": "2014-07-16T18:46:52.065Z",
    "CreatedBy": null,
    "CreatedOn": "2014-07-16T18:46:52.065Z",
    "IsDeleted": false
}

vm.shiptos：

[
    {
        "ShipTo": {
            "AccountNumber": "1234",
            "Email": null,
            "CompanyName": "Mk Mechanical",
            "Inactive": false,
            "PhoneNumbers": null,
            "ChildOfCustomer": "00000000-0000-0000-0000-000000000000",
            "Id": "b90f9b8c-3910-43ec-8c14-6294155ce855",
            "ModifiedBy": null,
            "ModifiedOn": "2014-07-15T23:03:58.47Z",
            "CreatedBy": null,
            "CreatedOn": "2014-07-15T23:03:58.47Z",
            "IsDeleted": false
        },
        "Addresses": [],
        "Customer": null,
        "Job": null,
        "Orders": []
    },
    {
        "ShipTo": {
            "AccountNumber": "12345",
            "Email": null,
            "CompanyName": "HK Electric",
            "Inactive": false,
            "PhoneNumbers": null,
            "ChildOfCustomer": "00000000-0000-0000-0000-000000000000",
            "Id": "a4aab309-321c-4b09-969c-073eb83b90ad",
            "ModifiedBy": null,
            "ModifiedOn": "2014-07-16T18:46:52.065Z",
            "CreatedBy": null,
            "CreatedOn": "2014-07-16T18:46:52.065Z",
            "IsDeleted": false
        },
        "Addresses": [],
        "Customer": null,
        "Job": null,
        "Orders": []
    }
]

我的 HTML 中的 ngoptions 语句：

<select id="ddlShipto" name="ddlShipto" data-ng-model="vm.Shipto" data-ng-options="shipto as shipto.ShipTo.CompanyName for shipto in vm.shiptos track by shipto.ShipTo.CompanyName" class="form-control FloatLeft" required>
                            <option selected="selected" value="">--Select One--</option>
                        </select>

【问题讨论】：

为了测试对象的相同性，它不检查属性，而是检查对象地址。虽然它们是相同的，但它们不是同一个对象。而不是这样做 $scope.vm.Shipto = vm.shiptos[1];

标签： javascript json angularjs

【解决方案1】：

不确定 track by 是否不是您在此处寻找的内容。

这是您使用的 ng-options 语法：select as label for value in array

您错误的部分是select 参数。此参数的表达式针对模型进行相等性检查以确定它是否匹配（并将自动设置选定的选项等）。所以，现在你的选择参数是shipto。这意味着为了默认为一个值，您的模型需要等于vm.shiptos 中的对象。

这里有两个选项：

第一个选项是循环通过vm.shiptos 并将您的模型设置为您希望默认的模型。例如：

angular.forEach($scope.vm.shiptos,function(el,i){
  //check objects against the JSON object and set the model to the object if desired
  if (el.ShipTo.AccountNumber === jsonObject.AccountNumber){
    theModelForNgOptions = el;
  }
};

您的第二个选项是将 ng-options select 参数更改为对象上的其他内容，这样模型就不必是整个对象。如果 AccountNumber 是您对这些对象的唯一标识符，您可以将选项更改为：

data-ng-options="shipto.ShipTo.AccountNumber as shipto.ShipTo.CompanyName for shipto in vm.shiptos

现在，仅当附加模型等于shipto.AccountNumber 时，选择才会默认。这是一个工作中的示例 jsfiddle：http://jsfiddle.net/ADukg/5392/

【讨论】：