Angularjs ng-checked 行为不一致

Question

我正在使用 angularjs，并且有一个表单的编辑视图，我试图在其中绑定以前使用的值。下面是我的code/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"，我还在 [=28] 中输出了表达式=]，这也符合预期，但我无法多次看到无线电被选中（无线电中的点），有时它有效，有时它不起作用。类型在不同时间加载，Foo 在不同时间加载。

Answer 1

您正在尝试将多个值绑定到单选按钮。 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>

Here's the doc

- - 编辑 - -
试试这个...删除 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

Answer 2

我通过在 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 与之前没有变化

Angularjs ng-checked 行为不一致

Angularjs ng-checked behaviour not consistent

angularjs

typescript

angularjs-ng-checked