Angularjs的ng检查行为不一致

Question

我正在使用angularjs，并有一个编辑视图的一个形式，我试图绑定以前使用的值。下面是我的代码/HTML。我也使用typescript为这个和控制器作为格式。

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>

Typescript JS获取Foo

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

我得到所有的值，一切都是绑定的，除了单选按钮，我可以看到checked="checked"在html检查元素，我也在html中输出表达式，这也是预期的，但我不能看到多次选中的单选(点在单选)，有时它工作，有时它不。type在不同时间加载，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>

这是文档

——编辑
试试这个…删除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与之前相同