Question

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

我有主题表，它有三个科目。每个主题都有唯一的ID。（同名，姓名）

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

e.g。

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，并且针对不同的学生重复该主题。因此，当我为Murray选择Math主题时，它基本上会在Math下选择Andy主题，因为Id是相同的。

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

请注意我不希望在不同的学生之下有Id Math的其他Id，否则这将是错误的，因为我在我的表格中选择主题Id。因此，存储的Id必须与subject表的原始Ci(t)匹配。

Answer 1

您可以在html中重复使用相同名称的选择器ID，这是针对Web标准的。您应该使用$index ng-repeat来使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>

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

2 个答案: