Angular JS NG-Repeat in Subarray

Question

I need to do a ng-repeat on a subarray (inside an element of an array). This is the data;

{familyName:'Vodka', familyCode:'1', hasPremium: '1', families: [
    { subFamilyName: 'Best', products: [
        { title: 'Grey goose 70 cl', price: '400', cant: '0', premium: '1' },
        { title: 'Grey goose 1,5l', price: '875', cant: '0', premium: '0' }
    ]},
    { subFamilyName: 'Poor', products: [
        { title: 'Grey goose 10 cl', price: '40', cant: '0', premium: '0' },
        { title: 'Grey goose 17,5l', price: '85', cant: '0', premium: '0' }
    ]}
]},
{familyName:'Rum', familyCode:'1', hasPremium: '1', families: [
    { subFamilyName: 'Best', products: [
        { title: 'Grey goose 70 cl', price: '400', cant: '0', premium: '1' },
        { title: 'Grey goose 1,5l', price: '875', cant: '0', premium: '0' }
    ]},
    { subFamilyName: 'Poor', products: [
        { title: 'Grey goose 10 cl', price: '40', cant: '0', premium: '0' },
        { title: 'Grey goose 17,5l', price: '85', cant: '0', premium: '0' }
    ]}
]

Perfect. I have in my $scope one var called selectedFamily which saves the family Code selected with navigation purposes. Now, in a I need to print the subfamilies of the selected family (coded in selectedFamily var) and the products of each of that subfamilies.

I was thinking how too filter and do the ng-repeat.

Aleksandar Gajic · Accepted Answer · 2015-06-12 12:30:34Z

3

Here is the solution for you

<li ng-repeat="item in items">
                <input type="text" ng-model="item.familyName" />
                <input type="text" ng-model="item.familyCode" />
                <ul>
                    <li ng-repeat="subItem in item.families">{{subItem.subFamilyName}}
                        <div ng-repeat="subSubItem in subItem.products">
                            <input type="text" ng-model="subSubItem.title" />
                            <input type="text" ng-model="subSubItem.price" />
                        </div>
                    </li>
                </ul>
            </li>

You can look at this fiddle http://jsfiddle.net/1ncubt8v/

answered Jun 12, 2015 at 12:30

Aleksandar Gajic

1,3591 gold badge18 silver badges23 bronze badges

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

3 Comments

Programador Adagal Over a year ago

Thank you a lot, It helps! But I need only to show the elements on one family. Like selectedFamily = "1".

Aleksandar Gajic Over a year ago

if you whant to show only one family you can do it like this jsfiddle.net/1ncubt8v/2

Programador Adagal Over a year ago

Thanks a lot! You the best. Thats what I was looking for ^^

Collectives™ on Stack Overflow

Angular JS NG-Repeat in Subarray

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related