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

Question

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

我有主题表，它有三个主题。 每个主题都有唯一的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是一样的。

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

请注意，我不想在不同的学生下使用不同的Math Id ，否则将是错误的，因为我在表中存储了选择的学科Id 。 因此，存储的Id必须与subject表的原始Id相匹配。

Answer 1

您可以在html中重复使用具有相同名称的选择器ID，这违反了Web标准。 您应该使用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>

Answer 2

使用$ parent遍历父循环。

<li ng-repeat="student in Students">
        <input type="checkbox" class="checkbox" id="{{student.Id}}"/>
        <label for="{{student.Id}}"><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}}_{{ $parent}}" ng-model="subject.Checked" />
                <label for="{{subject.Id}}_{{ $parent}}"><span id="{{subject.Name}}">{{subject.Name}}</span></label>
            </li>
        </ul>
    </li>