javascript - 单击元素时在列表组和 div 之间切换

Question

我有一个 HTML 页面，上半部分是静态的，下半部分是动态的。在此页面的移动 View 中，下半部分是一个列表组，每个元素代表一个类别。

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

Answer 1

您可以使用 ui-router 和多命名 View 或嵌套 View 轻松实现:

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>