How do i select multiple checkbox have same name and Id

Question

I am struggling to find the logic to handle my situation stated below. please have a look.

I have subject table and it has three subjects. Each subject has unique id. (Id, Name)

I am displaying each subject on UI as child checkboxe (using <ul> element) for 3 different students (parent checkbox using <li>).

e.g.

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

Code:

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

So, user can select subject under each student and can save it. The Id of each subject is unique and is coming from Student table.

Problem: For example, Math subject has same Id and it is repeated for different student. So, when i select Math subject for Murray it basically selects Math subject under Andy because Id is same.

Can someone suggest how i can handle it in better way?

Please note i dont want to have different Id of Math under different student otherwise it will be wrong becuase i am storig select subject Id in my table. So stored Id has to be matched with original Id of subject table.

"Please note i dont want to have different Id of Math" — Too bad. An ID must be unique in a document. — Quentin
– Quentin, Commented Jun 25, 2015 at 19:52
you shouldn't need ng-repeat="subject in student[0].Subjects" - it should just be ng-repeat="subject in student.Subjects" - remove the [0] - you're already looping in that student — Darren Wainwright
– Darren Wainwright, Commented Jun 25, 2015 at 19:54
@Quentin, if i keep Math Id different for each student and than i select Math for each student and save than Math will have different Id for each student as compared to its oringal id in Subject table. Do you understand what i mean? — TheKingPinMirza
– TheKingPinMirza, Commented Jun 25, 2015 at 19:59
You probably shouldn't be using id to store that data in the first place. It sounds more like a value. — Quentin
– Quentin, Commented Jun 25, 2015 at 20:08

Pankaj Parkar · Accepted Answer · 2015-06-25 20:16:55Z

1

You could repeat the selector id with the same name in html, that is against the web standard. You should use $index of ng-repeat to make id unique.

The unique id would be for inner ng-repeat would be {{subject.Id+ $index + $parent.$index}}

Markup

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

edited Jun 25, 2015 at 20:16

answered Jun 25, 2015 at 19:52

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TheKingPinMirza Over a year ago

i think your answer make sense to me. Let me give a try.

TheKingPinMirza Over a year ago

adding + $index does not make any different to Id.. i mean id="{{subject.Id+ $index}}" and id="{{subject.Id}}" generates same Id and hence Math Id is repeated under different student. so ended up with same problem.

Pankaj Parkar Over a year ago

@immirza take a look at my update..it will work 100%

TheKingPinMirza Over a year ago

excellent it works for me, However i have one doubt left now... See the orignal Id of Math subject in my Subjects table is '538df185-581b-e511-82ed-303a64efb676' and with the change you suggested the Math id is not '538df185-581b-e511-82ed-303a64efb67601' .. i see 01 is appended in the end which is fine. Now if select Math and save than i believe subject.Id (oringal Id)will be send to database. Right? Adding '$index + $parent.$index' is just differ Id on UI. Hope you get my point.

Pankaj Parkar Over a year ago

@immirza yes you are correct..you are just used it on UI..the value of original id want get modified...Glad to help you.Thanks :)

|

Rhea · Accepted Answer · 2015-06-25 19:58:29Z

0

Use $parent to iterate over the parent loop.

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

answered Jun 25, 2015 at 19:58

Rhea

6441 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

How do i select multiple checkbox have same name and Id

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related