角NG-选项中选择不被设置为初始值 [英] Angular ng-options select not being set to initial value

查看:94
本文介绍了角NG-选项中选择不被设置为初始值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我以我的初始化页面上的一些输入和选择值发送一个JSON对象。对象持有SHIPTO属性。我想下拉到这个初始值来填充。由于某种原因,它是不填充,即使它们是相同的对象。我甚至在轨道中通过添加,以确保它是基于公司名称测试平等(不完全相信如果多数民众赞成由意味着什么轨道)以下是我有:

JSON对象:

  {
    账户号码:12345,
    电子邮件:空,
    公司名称:港灯
    无效:假的,
    PHONENUMBERS:空,
    ChildOfCustomer:00000000-0000-0000-0000-000000000000,
    ID:a4aab309-321c-4b09-969c-073eb83b90ad
    ModifiedBy:空,
    ModifiedOn:2014-07-16T18:46:52.065Z
    CreatedBy:空,
    CreatedOn:2014-07-16T18:46:52.065Z
    请将isDeleted:假的
}

vm.shiptos:

  [
    {
        运送到: {
            账户号码:1234,
            电子邮件:空,
            公司名称:的Mk机械,
            无效:假的,
            PHONENUMBERS:空,
            ChildOfCustomer:00000000-0000-0000-0000-000000000000,
            ID:b90f9b8c-3910-43ec-8c14-6294155ce855
            ModifiedBy:空,
            ModifiedOn:2014-07-15T23:03:58.47Z
            CreatedBy:空,
            CreatedOn:2014-07-15T23:03:58.47Z
            请将isDeleted:假的
        },
        地址:[],
        客户:空,
        作业:空,
        命令: []
    },
    {
        运送到: {
            账户号码:12345,
            电子邮件:空,
            公司名称:港灯
            无效:假的,
            PHONENUMBERS:空,
            ChildOfCustomer:00000000-0000-0000-0000-000000000000,
            ID:a4aab309-321c-4b09-969c-073eb83b90ad
            ModifiedBy:空,
            ModifiedOn:2014-07-16T18:46:52.065Z
            CreatedBy:空,
            CreatedOn:2014-07-16T18:46:52.065Z
            请将isDeleted:假的
        },
        地址:[],
        客户:空,
        作业:空,
        命令: []
    }
]

在我的HTML的ngoptions语句:

 <选择一个id =ddlShiptoNAME =ddlShipto数据-NG-模式=vm.Shipto数据-NG选项=SHIPTO为shipto.ShipTo.CompanyName通过shipto.ShipTo.CompanyName在vm.shiptos轨道SHIPTO级=的形式控制FloatLeft要求>
                            <选项选择=选择值=> - 选择一个 - < /选项>
                        < /选择>


解决方案

不知道按部就班地进行,是不是你要找的东西在这里。

这是NG选项语法使用的是:选择作为标签的数组值

你有错的部分是选择参数。这个参数的前pression得到核对的模型,以确定它是否匹配(并且会自动设定选择的选项,等等)平等。所以,现在你选择的参数是 SHIPTO 。这意味着,为了默认为一个值,模型需要等于该对象在 vm.shiptos

下面是两个选项:

第一个选项是通过 vm.shiptos 循环,你的模型设置为你想默认之一。例如:

  angular.forEach($ scope.vm.shiptos,功能(EL,I){
  //检查对象对JSON对象并根据需要设置模型对象
  如果(el.ShipTo.AccountNumber === jsonObject.AccountNumber){
    theModelForNgOptions =报;
  }
};

您有第二个选择是改变NG选项选择参数的对象别的东西,所以该模型并不一定是整个对象。如果账户号码是你的唯一标识这些对象,你可以改变你的选择为:

数据-NG选项=shipto.ShipTo.AccountNumber作为shipto.ShipTo.CompanyName在vm.shiptos SHIPTO

现在,选择将默认只有在连接模式等于 shipto.AccountNumber 。下面是这个工作的例子的jsfiddle: http://jsfiddle.net/ADukg/5392/

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>

解决方案

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/

这篇关于角NG-选项中选择不被设置为初始值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆