相关疑难解决方法(0)

我正在尝试使用ng-options和a <select>将数字整数值绑定到相应选项的列表.在我的控制器中,我有这样的事情:

myApp.controller('MyCtrl', function() {
    var self = this;

    var unitOptionsFromServer = {
        2: "mA",
        3: "A",
        4: "mV",
        5: "V",
        6: "W",
        7: "kW"
    };

    self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {
        return { id: key, text: unitOptionsFromServer[key] };
    });

    self.selectedUnitOrdinal = 4; // Assume this value came from the server.
});

HTML:

<div ng-controller="MyCtrl as ctrl">
    <div>selectedUnitOrdinal: {{ctrl.selectedUnitOrdinal}}</div>
    <select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select>
</div>

这里有一个jsFiddle演示了这个问题,以及我采取的一些其他方法,但我并不满意.

正在使用空值初始化select选项,而不是在此示例中预期的"mV".如果您选择其他选项 - selectedUnitOrdinal正确更新,绑定似乎工作正常.

我注意到如果你将初始模型值设置为字符串而不是数字,那么初始选择就可以了(参见小提琴中的#3).

我真的希望ng-options能够很好地使用数字选项值.我怎样才能优雅地实现这一目标？

我在Angular2中创建一个由Object数组而不是字符串支持的选择时遇到了麻烦.我知道如何使用ngOptions在AngularJS中执行此操作,但它似乎不适用于Angular2(我使用的是alpha 42).

在下面的示例中,我有四个选择,但只有两个选择.

1. 'Select String'是一个简单的基于字符串的选择,它工作正常.
2. '通过双向绑定选择对象'是我尝试使用双向绑定.不幸的是,它以两种方式失败 - 当页面加载时,select显示错误的值(foo而不是bar),当我在列表中选择一个选项时,值'[object Object]'被发送到后备存储而不是正确的价值.
3. '通过事件选择对象'是我尝试从$ event获取所选值.它也以两种方式失败 - 初始加载与#2一样不正确,当我在列表中选择一个选项时,从事件中检索到'[object Object]'的值,所以我不能得到正确的价值.选择被清除.
4. '通过字符串选择对象'是使用有效对象的唯一方法.不幸的是,它确实通过使用#1中的字符串数组并将值从字符串转换为对象和返回来实现.

如果这是预期的方式,我可以做#4,但它看起来很笨重.还有另一种方法吗？我是不是太早了？我做了些傻事吗？

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';

interface TestObject {
  name:string;
  value:number;
}

@Component({
  selector: 'app',
  template: `
    <h4>Select String</h4>
    <select [(ng-model)]="strValue">
        <option *ng-for="#o of strArray" [value]="o">{{o}}</option>
    </select>

    <h4>Select Object via 2-way binding</h4>
    <select [(ng-model)]="objValue1">
        <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option>
    </select>

    <h4>Select Object via event</h4>
    <select [ng-model]="objValue2" (change)="updateObjValue2($event)">
        <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option>
    </select>

    <h4>Select Object via string</h4>
    <select [ng-model]="objValue3.name" (change)="updateObjValue3($event)"> …