使用Angular JS模型的子集

时间:2014-03-25 16:59:41

标签: javascript json angularjs

这是我的模特:

   var nav = [{
        label: 'Pages',
        value: '#',
        toggle: 'dropdown', // set this to '' when the menu has no children
        children: [{
            label: 'Home',
            value: 'home'
       }, {
            label: 'Left Nav',
            value: 'leftnav'
        }, {
            label: 'Two-Panel Selector',
            value: 'two_panel_selector'
        }]
    }, {
        label: 'Components',
        value: '#',
        toggle: 'dropdown',
        children: [{
            label: 'Lists & Tables',
            value: 'lists_tables'
        }]
    }, {
        label: 'Elements',
        value: '#',
        toggle: 'dropdown',
        children: [{
            label: 'Text',
            value: 'elements?section=Text'
        }, {
            label: 'Buttons',
            value: 'elements?section=Buttons'
        }, {
            label: 'Alerts',
            value: 'elements?section=Alerts'
        }, {
            label: 'Inputs',
            value: 'elements?section=Inputs'
        }, {
            label: 'Icons',
            value: 'elements?section=Icons'
        }, {
            label: 'Sample Grid',
            value: 'elements?section=Grid'
        }, ]

    }];

    return {
        getNavData: function() {
            return nav;
        }
    };

我想与" Elements"列表中的孩子。这工作正常,但我想知道是否有一种不使用数组索引的方法:

div class="list-group">
    <a class="list-group-item" ng-repeat="l in navData[2].children" ng-class="{'active': l.label == submenu}" ng-click="select(l.label)">{{l.label}}</a>
  </div>

1 个答案:

答案 0 :(得分:0)

您可以像这样搜索数组中的元素:

<a ng-repeat="l in elementsChildren()"></a>

并在您的控制器中:

$scope.elementsChildren() = function() {
  for(var i = 0; i < nav.length; i++) {
    if (nav[i].label === 'Elements')
      return nav[i].children;
    return [];
}

这意味着如果'Elements'在数组中移动,您的视图将不会中断。但是,这更贵。现在,您将遍历数组以查找“元素”(O(n)),而不是直接索引到数组(O(1))。