UL with CheckBox Problems AngularJS

Question

UL with CheckBox Problems AngularJS

Navigation

#1 by (0 votes)

0

I'm trying to create a CheckBox tree but I'm having problems with my policy when passing the model.

Follow the code below:

<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 on one is marking all.

javascript html angularjs node.js

asked by anonymous 28.07.2017 / 21:33

1 answer

ValueError type error in Learn Python the Hard Way Problem publishing application with Microsoft Advertising

score 0 · Answer 1

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

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

I solved by concatenating the id of each object in my array, thus:

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