1

私は angularjs を使用しており、以前に使用した値をバインドしようとしている 1 つのフォームの編集ビューがあります。以下は私のコード/ 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>

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 に答える