角度ng-options选择未设置为初始值

Question

I am sending a JSON object in order to initialize some input and select values on my page. The object holds a ShipTo property. and I want the dropdown to be populated with this initial value. For some reason it is not populating, even though they are the same object. I even added in a track by to make sure it is testing equality based on the CompanyName (not exactly sure if thats what track by is meant for) Here is what I have:

the JSON Object:

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

The ngoptions statement in my HTML:

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

Answer 1

Not sure track by is not what you're looking for here.

This is the ng-options syntax you are using: select as label for value in array

The part you have wrong is the select parameter. This parameter's expression gets equality checked against the model to determine if it is a match (and will automatically set selected option, etc). So, right now your select parameter is shipto . This means that in order to default to a value, your model needs to be equal to the object in vm.shiptos .

Here's two options:

The first option is to loop through the vm.shiptos and set your model to the one you would like to default. eg:

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

The second option you have is to change the ng-options select parameter to something else on the object, so that the model doesn't have to be the whole object. If AccountNumber is your unique identifier to those objects, you could change your options to:

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

Now, the select will default only if the attached model is equal to shipto.AccountNumber . Here is an example jsfiddle of this at work: http://jsfiddle.net/ADukg/5392/