子阵中的角度JS NG重复

时间:2015-06-12 12:17:38

标签: javascript angularjs

我需要对子阵列(在数组元素内)进行ng-repeat。这是数据;

{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' }
    ]}
]

完美。我在$ scope中有一个名为selectedFamily的var,它保存了用于导航目的的系列代码。现在,我需要打印所选族的子系列(用selectedFamily var编码)和每个子系列的产品。

我在考虑如何过滤并进行ng-repeat。

1 个答案:

答案 0 :(得分:3)

以下是适合您的解决方案

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

你可以看看这个小提琴 http://jsfiddle.net/1ncubt8v/