UL with Checkbox Angularjs Problems

Question

I’m trying to create a Checkbox tree but I’m having problems with my directive when passing the model.

Follows code:

<ul class="main-level"><li>
    <mdi-input-checkbox mdi-reverse="true"
        mdi-model="checked"
        mdi-label="Elemento A">
    </mdi-input-checkbox>
<ul class="sub-level sub-level-0"><li>
    <mdi-input-checkbox mdi-reverse="true"
        mdi-model="checked"
        mdi-label="Elemento A1">
    </mdi-input-checkbox>
<ul class="sub-level sub-level-1"><li>
    <mdi-input-checkbox mdi-reverse="true"
        mdi-model="checked"
        mdi-label="Elemento A1a">
    </mdi-input-checkbox>
<ul class="sub-level sub-level-1"><li>
    <mdi-input-checkbox mdi-reverse="true"
        mdi-model="checked"
        mdi-label="Elemento A1a1">
    </mdi-input-checkbox>
</li><li>
    <mdi-input-checkbox mdi-reverse="true"
        mdi-model="checked"
        mdi-label="Elemento A1a2">
    </mdi-input-checkbox>
</li></ul></li><li>
    <mdi-input-checkbox mdi-reverse="true"
        mdi-model="checked"
        mdi-label="Elemento A1b">
    </mdi-input-checkbox>
</li></ul></li><li>
    <mdi-input-checkbox mdi-reverse="true"
        mdi-model="checked"
        mdi-label="Elemento A2">
    </mdi-input-checkbox>
<ul class="sub-level sub-level-2"><li>
    <mdi-input-checkbox mdi-reverse="true"
        mdi-model="checked"
        mdi-label="Elemento A2a">
    </mdi-input-checkbox>
</li><li>
    <mdi-input-checkbox mdi-reverse="true"
        mdi-model="checked"
        mdi-label="Elemento A2b">
    </mdi-input-checkbox>
</li></ul></li></ul></li></ul>

if I click one is marking all.

Answer 1

So this HTML is automatically generated by my controller, I created a directive called Tree, it is nothing more than a Checkbox tree right? I had an impasse when passing a ng-model property for each checkbox.

My directive has a recursive function that traverses an array and returns the HTML by concatenating the Tags UL and LI, but when I passed the ng-model="element.checked", it turned out that all check-boxes had the same name in the property, when marking one it marked all.

I decided to concatenate the id of each object of my array, so:

<ul class="main-level">
    <li>
        <mdi-input-checkbox mdi-reverse="true"
                            mdi-model="tree[1].checked"
                            mdi-label="Elemento A">
        </mdi-input-checkbox>
        <ul class="sub-level sub-level-0">
            <li>
                <mdi-input-checkbox mdi-reverse="true"
                                    mdi-model="tree[2].checked"
                                    mdi-label="Elemento A1">
                </mdi-input-checkbox>
                <ul class="sub-level sub-level-1">
                    <li>
                        <mdi-input-checkbox mdi-reverse="true"
                                            mdi-model="tree[3].checked"
                                            mdi-label="Elemento A1a">
                        </mdi-input-checkbox>
                        <ul class="sub-level sub-level-1">
                            <li>
                                <mdi-input-checkbox mdi-reverse="true"
                                                    mdi-model="tree[4].checked"
                                                    mdi-label="Elemento A1a1">
                                </mdi-input-checkbox>   
                            </li>
                            <li>
                                <mdi-input-checkbox mdi-reverse="true"
                                                    mdi-model="tree[5].checked"
                                                    mdi-label="Elemento A1a2">
                                </mdi-input-checkbox>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <mdi-input-checkbox mdi-reverse="true"
                                            mdi-model="tree[6].checked"
                                            mdi-label="Elemento A1b">
                        </mdi-input-checkbox>
                    </li>
                </ul>
            </li>
            <li>
                <mdi-input-checkbox mdi-reverse="true"
                                    mdi-model="tree[7].checked"
                                    mdi-label="Elemento A2">
                </mdi-input-checkbox>
                <ul class="sub-level sub-level-2">
                    <li>
                        <mdi-input-checkbox mdi-reverse="true"
                                            mdi-model="tree[8].checked"
                                            mdi-label="Elemento A2a">
                        </mdi-input-checkbox>
                    </li>
                    <li>
                        <mdi-input-checkbox mdi-reverse="true"
                                            mdi-model="tree[9].checked"
                                            mdi-label="Elemento A2b">
                        </mdi-input-checkbox>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

To make it even clearer, in my recursive function, I pass the value like this:

ng-model="tree[${id}].checked"