Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I am working in a project that requires me to list some items from a top level of multidimensional array as check boxes and then depending on which of the items a checked I am supposed to display only those sub array items that belong to each top item

Now please bear with me because I am only just getting into AngularJS and a lot of it is unfamiliar and still very new to me. I tried finding something similar but no luck.

I have a scope that looks like this..

$scope.options = [ 
    { pubId:'1' , pubName:'Option A' , pubSubs:[
        { pubSubId:'1' , pubSub:'Sub Option A 1' },
        { pubSubId:'2' , pubSub:'Sub Option A 2' }
        ]
    },
        { pubId:'2' , pubName:'Option B' , pubSubs:[
        { pubSubId:'3' , pubSub:'Sub Option B 1'},
        { pubSubId:'4' , pubSub:'Sub Option B 2'}
        ]
        }    
    ];

and html that looks like this...

<div ng-repeat="option in options">
    <ul>
        <li>
            <input type="checkbox" name="pub" value="{{option.pubId}}">
            {{option.pubName}}
        </li>
    </ul>
</div>

<div ng-repeat="option in options">
<div ng-repeat="suboption in option.pubSubs">

    <ul>
        <li>
            <input type="checkbox" name="pub" value="{{suboption.pubSubId}}">
            {{suboption.pubSub}}
        </li>
    </ul>
</div>
</div>

I am leaning towards using ng-show/hide somehow but I am not sure if that is the way to go.

So when the first array top level items are listed

Option A | Option B

If I check "Option A" only

Sub Option A 1 | Sub Option A 2

Are to be displayed in the list below..

I understand that ng-checked might be used in this context somehow as well.

All help is greatly appreciated.

share|improve this question
 
Plunker please (: –  hugo der hungrige 21 hours ago

1 Answer

up vote 1 down vote accepted

You can use filters for this, however you need to bind the select box model to a selected property to acheive this.

Untested code follows:

<div ng-repeat="option in options">
    <ul>
        <li>
            <input type="checkbox" name="pub" ng-model="option.selected" value="{{option.pubId}}">
            {{option.pubName}}
        </li>
    </ul>
</div>

<div ng-repeat="option in options | filter:{selected:true}">
<div ng-repeat="suboption in option.pubSubs">

    <ul>
        <li>
            <input type="checkbox" name="pub" value="{{suboption.pubSubId}}">
            {{suboption.pubSub}}
        </li>
    </ul>
</div>
</div>
share|improve this answer
 
Thanks for the nudge in the right direction. My actual code is more complex but this gives me an understanding on what I need. Thanks,, and in this reduced model your code actually works just fine. I appreciate it. I guess I need to look deeper into documentation..(although it is pretty hard to get anywhere.. I find it is hard to get off the ground with ng-js) –  Kris 20 hours ago
 
Keep at it. It's worth it :) –  ricick 20 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.