Question

我有导航栏，侧边栏和容器。对于navbar中的每个项目都有不同的侧边栏。
例如： - 如果我点击导航A，它有侧边栏A，B，C。 - 如果我点击导航B，它有侧边栏D，E，F

并且对于每个侧边栏在容器中具有不同的数据。任何人都知道如何在angularjs中创建该接口的逻辑。

Answer 1

听起来我想要根据选择的Nav显示不同的内容，你可以这样做：

HTML：

<div data-ng-controller="nav-controller">
    <ul data-ng-view>
        <li data-ng-click="showSidebar('a');">Sidebar A</li>
        <li data-ng-click="showSidebar('b');>Sidebar B</li>
    </ul>
    <ul data-ng-view="sidebar">
        {{sidebarContent}}
    <ul>
</div>

控制器内的Javascript：

$scope.showSidebar = function(name){
    if(name == "a"){
        $scope.sidebarContent = "someCode for sidebar A";
    };
    if(name == "b"){
        $scope.sidebarContent = "someCode for sidebar B";
    };
};

或者，您可以将代码放在自己的模板中，并使用以下内容：

HTML：

    <div data-ng-include="{{sidebarContentUrl}}"></div>

控制器内的Javascript：

$scope.showSidebar = function(name){
    if(name == "a"){
        $scope.sidebarContentUrl = "partials/sidebarA.tpl.html";
    };
    if(name == "a"){
        $scope.sidebarContentUrl = "partials/sidebarB.tpl.html";
    };
};

您还可以在一个模板中包含所有侧边栏，并有条件地隐藏它们。

Angular JS：如何在ng-view中更改视图

1 个答案: