Question

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

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

在视图中，我有两个选择：

    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的键是字符串。有没有办法连接它们呢？（我无法更改任何一个数组中键的类型。）

这是一个小提琴：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在角度表达式中不可用。

控制器：

    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

1 个答案: