具有ng-change

时间:2017-02-03 16:30:23

标签: javascript angularjs

我有这个看起来像这样的模型:

{
    id: 1,
    country: {
        code: 'GB',
        name: ''
    }
}

国家/地区代码存储在数据库中,但名称不存储。但是,还有另一个应用程序需要国家名称而不是代码.... 因此,在编辑此模型时,我的下拉列表中包含代码名称的国家/地区列表。 我将ng-options设置为:

ng-options="item.code as item.name for item in controller.countries"

我这样做是为了让国家预先填充我当前的代码。 问题是,当有人选择其他国家/地区时,我想设置名称。 我尝试这样做:

 ng-change="controller.setCodeAndName(controller.model.country, item)"

,方法看起来像这样:

setCodeAndName: function (model, item) {
    console.log(item);
    model.code = item.value;
    model.fullName = item.description;
},

但是,这不起作用,因为项目未定义。我知道这是因为 item (应该是当前选中的项目)尚未传递给方法。 有没有人知道如何修复我的问题,以便仅根据代码预先填充国家/地区,当它更改时,会将名称添加到对象中?

1 个答案:

答案 0 :(得分:0)

您还需要选择ngModel - 我还建议您只使用整个对象作为模型分配 - 因此您的select最终会如下所示:

<select
    ng-model="selectedItem"
    ng-options="item as item.name for item in controller.countries"
    ng-change="controller.setCodeAndName(selectedItem)"
</select>

你的方法:

setCodeAndName: function (item) {
    console.log(item);
    model.code = item.value;
    model.fullName = item.description;
},