具有不同类型键的 ng-options

Question

我使用 AngularJS 和 TypeScript。我想通过一个公共模型变量连接两个 select 元素。在控制器中，我有两个键值数组，一个以数字为键，另一个以字符串为键，如下所示：

foo: IKeyValuePair[] = [
             {key: 1, value: "koko"},
             {key: 2, value: "hoho"},
             {key: 3, value: "jojo"}
    ];
bar: IKeyValuePair[] = [
             {key: "1", value: "kaka"},
             {key: "2", value: "haha"},
             {key: "3", value: "jaja"}
    ];

在视图中，我有两个 select：

    Foo-selector: <select ng-model="vm.baz" 
        ng-options="f.key as f.value for f in vm.foo"></select>

    Bar-selector: <select ng-model="vm.baz" 
        ng-options="f.key as f.value for f in vm.bar"></select>

我希望它们通过模型连接，vm.baz，但问题是 foo 的键是数字而 bar 的键是字符串。有没有办法连接它们？（我无法更改任一数组中键的类型）。

这是一个fiddle：http://fiddlesalad.com/typescript/ngoptions-selected-by-model

Answer 1

您可以将其中一个键转换为另一种类型。

例如，您可以将数字转换为字符串。

由于您可以将表达式用作值或键，因此您真正需要做的就是将其设为字符串。最简单的方法是在末尾添加一个空字符串。

Foo-selector:
<select ng-model="vm.baz" ng-options="f.key + '' as f.value for f in vm.foo">

如果你想让两个键都成为数字，你需要在控制器中创建一个方法来将字符串转换为数字，因为 parseInt 在 angular 表达式中不可用。

控制器：

    normalize(value): number {
      return parseInt(value, 10);
    }

模板：

Bar-selector:
<select ng-model="vm.baz" ng-options="vm.normalize(f.key) as f.value for f in vm.bar">

具有不同类型键的 ng-options

ng-options with keys of different types

angularjs

drop-down-menu

typescript

ng-options