javascript - 在 DIV Angular JS 之间切换

Question

我是 AngualrJS 的新手。我想知道是否有某种方法可以在不同的 DIV 之间切换。

比方说，我有一个菜单，通过单击它，我想关闭当前的 DIV，并打开一个新的 DIV。

如果我打开一个潜水，然后单击另一个潜水，它也会出现。

有没有人有一个想法，很想解决这个问题？

HTML:

<div ng-app="app">
    <div ng-controller="MainController">
        <div>
            <ul>
                <li data-ng-repeat="Menu in Menus">
                    <a class="" href="#" ng-click="show=toggle(Menu)">
                        {{Menu.id}}
                    </a>

                </li>
            </ul>
        </div>
        <div data-ng-repeat="Menu in Menus" ng-show="Menu.show">
             <h2>
                     {{Menu.text}}
                </h2>

        </div>
    </div>
</div>

还有 JS:

angular.module('app', []).

controller('MainController', ['$scope', function ($scope) {
    $scope.Menus = [{
        id: 1,
        text: "This is first DIV!!!",
        show: true
    }, {
        id: 2,
        text: "This is second DIV!!!",
        show: false
    }, {
        id: 3,
        text: "This is third DIV!!!",
        show: false
    }];

    $scope.toggle = function (Menu) {
        Menu.show = !Menu.show;        
        return Menu.show;

    };


}]);

Answer 1

您可以隐藏所有菜单并仅显示选定的菜单，如下更改切换功能:

$scope.toggle = function (Menu) {
    $scope.Menus.forEach(function(m) {
        m.show = (Menu==m);
    });
};

更新:

这是一个更好的替代方案，代码更少、更快:

您可以删除数据上的显示属性并将切换功能更改为

$scope.toggle = function (Menu) {
    $scope.activeMenu = Menu.id;
};

并将您的 ng-show 更改为 ng-show="Menu.id==(activeMenu || 1)"

这是一个工作示例:https://refork.codicode.com/xc23

希望这有帮助。