1

我正在使用 angularjs，并且有一个表单的编辑视图，我正在尝试绑定以前使用的值。下面是我的代码/HTML。我也为此使用打字稿和控制器作为格式。

HTML：

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-model="Ctrl.Foo.Type" ng-value="type.TypeId" required ng-checked="type.TypeName===Ctrl.Foo.TypeName" />
    {{ type.TypeName }} {{ type.TypeName===Ctrl.Foo.TypeName }}
</label>

用于获取 Foo 的 Typescript JS

Foo:any;
getFoo = (Fooid) => {
    this.FooResource.getFooById(Fooid).then((response) => {
        this.Foo= response.data;
    });
};

我得到了所有的值，一切都是绑定的，除了单选按钮，我可以在 html 检查元素中看到 checked="checked"，我还在 html 中输出了表达式，这也是预期的，但我看不到收音机多次选择（收音机中的点），有时有效，有时无效。类型在不同时间加载，Foo 在不同时间加载。

4

2 回答 2

0

您正在尝试将多个值绑定到单选按钮。ngModel 和 ngValue 会将数据绑定到单选按钮，在您的示例中，您尝试将 2 个不同的值绑定到单选按钮。因此，您将看到不一致的行为。

尝试这个。

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-model="type.TypeId" required ng-checked="type.TypeName===Ctrl.Foo.TypeName" />
    {{ type.TypeName }} {{ type.TypeName===Ctrl.Foo.TypeName }}
</label>

或者

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-value="type.TypeId" required ng-checked="type.TypeName===Ctrl.Foo.TypeName" />
    {{ type.TypeName }} {{ type.TypeName===Ctrl.Foo.TypeName }}
</label>

这是文档



----编辑----
试试这个...删除 ngChecked

<div ng-app ng-controller="myCtrl">
    <label>Enter a character</label>
    <input type="text" ng-model="Ctrl.Foo.TypeName">
    <div ng-repeat="type in Ctrl.types">
        <input type="radio" name="Type" ng-model="Ctrl.Foo.TypeName" ng-value="type.TypeName" required />{{type.TypeName}}
    </div>
</div>


JSFiddle

于 2015-08-27T06:39:34.840 回答
0

我通过在 ng-checked 中添加一个函数而不是表达式来实现这一点，在该函数中，我返回 true 或 false，并且在返回之前将 ng-model 设置为该选定值，如下所示。

<label ng-repeat="type in Ctrl.Types">
    <input type="radio" name="Type" ng-model="Ctrl.Foo.Type" ng-value="type.TypeId" required ng-checked="Ctrl.isTypeChecked(type)" />
    {{ type.TypeName }}
</label>

JS：

isTypeChecked = (t) => {   
    if (t.TypeName === this.Foo.TypeName) {
        this.Foo.Type = t.TypeId;
    }    
    return t.TypeName === this.Foo.TypeName;
};

getFoo 与以前相比没有变化。

于 2015-08-27T10:44:42.473 回答