使用 ng-repeat 设置动态单选按钮的值答案

【问题标题】：Setting value on dynamic radio button with ng-repeat使用 ng-repeat 设置动态单选按钮的值
【发布时间】：2015-01-17 07:33:44
【问题描述】：

我在将动态创建的单选按钮组中的值设置为对象时遇到问题。当 ng-model 中指定的对象不为空时，单选按钮不会被选中，并且单击任何单选都不会触发附加的 $watch。但是，如果加载时 ng-model 中的对象为 null，则 $watch 似乎可以正常工作。现在，如果我将 ng-model 的值更改为一个字符串，它可以正常工作，问题是我需要整个对象。基本上每个模型都是一个问题，当 UI 中的问题发生变化时，整个模型对象都会发送到 Web 服务。

数据（值已设置 - 不起作用）

{
    "__type": "RadioQuestion:#MyProject.Model.Entities",
    "Id": "ff3234ba-40fe-43e3-9457-ea5e3b5ae5a7",
    "Question": "Question goes here",
    "RangeMaxText": "Very likely",
    "RangeMinText": "Not Likely",
    "Title": "Question headline",
    "DefaultValue": {
        "Id": "id-for-no-value",
        "Name": "Nej"
    },
    "PossibleValues": [
        {
            "Id": "id-for-yes-value",
            "Name": "Yes"
        },
        {
            "Id": "id-for-no-value",
            "Name": "No"
        }
    ],
    "Question": "Hows it hanging?",
    "Value": {
        "Id": "id-for-no-value",
        "Name": "Nej"
    }
}

标记

<h4>{{question.Question}}</h4>
<label data-ng-repeat="pValue in question.PossibleValues" for="{{question.Id}}-{{pValue.Id}}">
    <input
        id="{{question.Id}}-{{pValue.Id}}"
        name="radio-for-{{question.Id}}"
        type="radio"
        data-ng-value="pValue"
        data-ng-model="question.Value" />
        {{pValue.Name}}
</label>

数据（值为空 - 有效）

{
    "__type": "RadioQuestion:#MyProject.Model.Entities",
    "Id": "ff3234ba-40fe-43e3-9457-ea5e3b5ae5a7",
    "Question": "Question goes here",
    "RangeMaxText": "Very likely",
    "RangeMinText": "Not Likely",
    "Title": "Question headline",
    "DefaultValue": {
        "Id": "id-for-no-value",
        "Name": "Nej"
    },
    "PossibleValues": [
        {
            "Id": "id-for-yes-value",
            "Name": "Yes"
        },
        {
            "Id": "id-for-no-value",
            "Name": "No"
        }
    ],
    "Question": "Hows it hanging?",
    "Value": null
}

这是手表功能：

this.$scope.questions.forEach((question) => {
    this.$scope.$watch(
        () => { return question; },
        (newVal, oldVal) => this.updateQuestion(newVal, oldVal),
        true
    );
});

【问题讨论】：

您是否将 ng-controller Question 作为问题导入？你能 console.log(question) 吗？
如果$watch函数发生变化，可以登录控制台吗？
喜青色。是的，我可以很好地登录 $watch 功能 - 它会输出带有更新值的问题。我刚刚发现，如果在加载时设置一个值，当单击另一个选项时，它会触发 $watch，并且从这里开始 $watch 工作正常。所以看起来 ng-model 设置正确，但只是没有检查无线电。
设置数据-ng-value="pValue.Id"
嗨，青色，不幸的是，设置 data-ng-value="pValue.Id" 不起作用，因为这样 Value 将是一个字符串而不是一个带有 { id, name } 的对象，这是预期的保存答案时的服务器端。

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

据我所知，动态生成的元素在 AngularJS 1.2 中不是一个选项。应该在 1.3 中正常工作。

【讨论】：

嗨 Dragos，我正在使用 Angular 1.3.8。

【解决方案2】：

所以我发现我必须对 Value 对象的 ng-value 和 ng-model 使用 Id 属性才能完成这项工作

<label data-ng-repeat="pValue in question.PossibleValues" for="{{question.Id}}-{{pValue.Id}}">
    <input class="field radio"
        id="{{question.Id}}-{{pValue.Id}}"
        name="radio-for-{{question.Id}}"
        type="radio"
        data-ng-value="pValue.Id"
        data-ng-model="question.Value.Id" />
    {{pValue.Name}}
</label>

【讨论】：