javascript - 如何选择多个具有相同名称和 ID 的复选框

Question

我正在努力寻找处理下面所述情况的逻辑。请看一下。

我有主题表，它包含三个主题。每个主题都有唯一的 ID。(ID、姓名)

我在 UI 上将每个主题显示为 3 个不同学生的子复选框(使用 <ul> 元素)(父复选框使用 <li> )。

例如

Andy
    Math
    English
    Computer
John
    Math
    English
    Computer
Murray
    Math
    English
    Computer

代码:

<div>
    <div>
        <h5>Students Courses</h5>
    </div>
    <ul>
        <li ng-repeat="student in Students">
            <input type="checkbox" class="checkbox" id="{{student[0].Id}}"/>
            <label for="{{student[0].Id}}"><span class="Radiobox-txt" id="{{student[0].Name}}">{{student[0].Name}}</span></label>
            <ul>
                <li ng-repeat="subject in student[0].Subjects">
                    <input type="checkbox" id="{{subject.Id}}" ng-model="subject.Checked" />
                    <label for="{{subject.Id}}"><span id="{{subject.Name}}">{{subject.Name}}</span></label>
                </li>
            </ul>
        </li>
    </ul>
</div>

因此，用户可以在每个学生下选择科目并保存。 每个科目的 ID 都是唯一的，并且来自学生表。

问题:例如，Math主题有相同的Id并且对不同的学生重复进行。所以，当我选择 Math穆雷的主题基本上选择Math主题位于 Andy因为Id是一样的。

有人可以建议我如何以更好的方式处理它吗？

请注意，我不想有不同的 Id的Math在不同的学生下，否则会是错误的，因为我是斯托里格选择主题Id在我的 table 上。如此保存Id必须与原件Id相匹配的subject表。

Answer 1

您可以在 html 中重复具有相同名称的选择器 ID，这是违反网络标准的。您应该使用 ng-repeat 的 $index 来使 id 唯一。

内部 ng-repeat 的唯一 ID 为 {{subject.Id+ $index + $parent.$index}}

标记

    <li ng-repeat="student in Students">
        <input type="checkbox" class="checkbox" id="{{student[0].Id + $index + $parent.$index}}"/>
        <label for="{{student[0].Id+ $index + $parent.$index}}"><span class="Radiobox-txt" id="{{student[0].Name}}">{{student[0].Name}}</span></label>
        <ul>
            <li ng-repeat="subject in student.Subjects">
                <input type="checkbox" id="{{subject.Id+ $index + $parent.$index}}" ng-model="subject.Checked" />
                <label for="{{subject.Id+ $index + $parent.$index}}"><span id="{{subject.Name}}">{{subject.Name}}</span></label>
            </li>
        </ul>
    </li>