Question

我有一个HTML页面，其中上半部分是静态的，下半部分是动态的。在该页面的移动视图中，下半部分是列表组，每个项目代表一个类别。

单击任何项目时，我希望列表组消失，并且该类别的详细信息应显示在屏幕上。此外，不应影响上面的静态部分。我怎样才能做到这一点？

Answer 1

您可以轻松实现使用ui-router和多命名视图或嵌套视图：

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

 $stateProvider.state('nestedViews', {
        url: '/nested-views',
        views: {
            '': {
                templateUrl: 'components/nestedViews/partial-nested-views.html'
            },
            'columnOne@nestedViews': {
                templateUrl: 'components/nestedViews/partial-nested-views-content.html'
            },
            'columnTwo@nestedViews': {
                templateUrl: 'components/nestedViews/partial-nested-views-menu.html'
            }
        }
    });

在您的HTML中

<div class="row">
    <div class="col-sm-9">
        <div ui-view="columnOne"></div>
    </div>
    <div class="col-sm-3">
        <div ui-view="columnTwo"></div>
    </div>
</div>

在您的输入中

<a ui-sref="the_state" class="list-group-item list-group-nav-item">Category 1</a>

在项目单击时在列表组和div之间切换

1 个答案: