【问题标题】:Angularjs Radio Buttons in Nested ng-repeat not checked未选中嵌套 ng-repeat 中的 Angularjs 单选按钮
【发布时间】:2015-05-07 11:44:58
【问题描述】:

我有一个 html 模板,其中一个 ng-repeat 嵌套在父 ng-repeat 中。父 ng-repeat 包含单选按钮,用户可以在其中选择分别对应于值 1 和 0 的“满意”或“不满意”。如果用户选择不满意,则会显示详细的选项列表,以便他们可以选择更多收音机以获取更多信息。这是html;

<div class="group" ng-repeat="group in Groups">
<table>
    <tr>
        <td>{{group.Description}}</td>
        <td><input type="radio" value="1" name="{{group.Id}}" ng-model="group.SatisfactionLevel" /></td>
        <td><input type="radio" value="0" name="{{group.Id}}" ng-model="group.SatisfactionLevel" /></td>
    </tr>
</table>
<div class="group-detail" ng-class="{'hidden': group.SatisfactionLevel != 1}">
    <table>
        <tr ng-repeat="item in group.Details">
            <td>{{item.Description}}</td>
            <td><input type="radio" value="1" name="{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>
            <td><input type="radio" value="0" name="{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>
        </tr>
    </table>
</div>

服务器返回的json是这样的;

"Groups": [
        {
            "Id":"AA",
            "Description":"Service",
            "SatisfactionLevel":1,
            "Details":[{"Id":"AA1","Description":"Cleanliness","SatisfactionLevel":1},
                       {"Id":"AA2","Description":"Timeliness","SatisfactionLevel":1}
                      ]
        },
        {
            "Id":"AB",
            "Description":"Food",
            "SatisfactionLevel":1,
            "Details":[{"Id":"AB1","Description":"Price","SatisfactionLevel":1},
                       {"Id":"AB2","Description":"Portion","SatisfactionLevel":1}
                      ]
        }          
      ]

除了嵌套的 ng-repeat 中的单选按钮没有被选中之外,一切正常。我可以在提琴手中看到 Satisfactionlevel 属性包含值。有人看到我哪里出错了吗?谢谢

更新

代码确实没有任何问题。事实证明,Groups 中的不同项目可以包含相同的 Details 项目。由于我使用name="{{item.Id}}" 作为名称属性,因此其他组详细信息中具有相同名称但值不同的其他无线电会导致先前具有相同名称的无线电未被选中。 这是我的解决方法;

<td><input type="radio" value="1" name="{{group.Id}}-{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>

因为组 ID 是唯一的。

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    首先,inputs 中的值相同 - 我猜这是错字?

    其次,如果你使用value="1",它被解释为一个字符串"1",但是你的模型是一个整数1

    改为使用ng-value:

    <input type="radio" ng-value="0" name="{{item.Id}}" ng-model="item.SatisfactionLevel">
    <input type="radio" ng-value="1" name="{{item.Id}}" ng-model="item.SatisfactionLevel">
    

    【讨论】:

    • 外部 ng-repeat 中的组无线电工作,所以我不认为这是字符串与整数的问题。你试过 ng-value 没用
    • @MosesMachua,这是您在ng-value 中的fiddle 代码 - 什么不起作用?
    • @MosesMachua,你得到答案了吗?我在评论中提供的小提琴有什么不奏效的?
    • 对不起@New Dev。我没有。我看到了您的小提琴,但仍然无法解释为什么它在小提琴上而不是在实际代码上有效。以后还要多看,再更新。
    • @MosesMachua,那么你的问题并不完整,因为它不能自行重现错误
    猜你喜欢
    • 2022-11-11
    • 1970-01-01
    • 2015-06-27
    • 1970-01-01
    • 2022-01-20
    • 2014-04-11
    • 2018-12-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多