使用ng-repeat在动态单选按钮上设置值

摩腾

我在将动态创建的单选按钮组中的值设置为对象时遇到问题。如果ng-model中指定的对象不为null,则不选中单选按钮,单击任何单选按钮都不会触发附加的$ watch。但是,如果加载时ng-model中的object为null,则$ w​​atch似乎可以正常工作。现在,如果我将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
    );
});
摩腾

所以我发现我必须将Id属性同时应用于Value对象的ng-value和ng-model才能完成此工作

<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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用ng-repeat在angularjs中动态禁用单选按钮

无法使用Angular.js中的ng-repeat设置默认选中的单选按钮的选项

AngularJS - ng-repeat 多个单选按钮组,数组的值

如何使用文本框值在单选按钮上设置值

使用ng-repeat时默认选中单选按钮

AngularJS ng-repeat单选按钮列表:选定的单选返回未定义的值

使用选择选项从 JSON 动态设置单选按钮

使用Angular中的ng-repeat获取/设置动态生成的输入字段的值

如何在Rails集合上使用带有Angular ng-repeat的单选按钮,默认值为

嵌套ng-repeat内的单选按钮使用ng-model不起作用

在ng-repeat值中使用动态值

使用 Viewbag 模型绑定动态单选按钮值

ng-repeat单选按钮2向绑定问题,仅正确设置了最后一项

如何使用jQuery设置单选按钮选择值

如何使用反应形式设置单选按钮值?

在angular js的嵌套ng-repeat中仅选择一个单选按钮值

使用JQuery从数组上的单选按钮获取单个值

使用JQuery从数组上的单选按钮获取单个值

如何使用JavaScript对单选按钮上的值求和?

使用ng-repeat AngularJS中的ICheck单选按钮获取选定的索引

将ng-form与ng-repeat一起使用时,已连接AngularJs单选按钮

如何以反应形式设置Prime NG单选按钮默认值

使用Flux上的单选按钮

将按钮的值设置为ng-repeat name.cab_palette的值

使用ng-repeat在列表上分页

在 json 对象上使用 ng-repeat

使用ng-repeat访问值

使用ng-click或ng-model获取按钮值

在ng-repeat中无法单击单选按钮