在DIV Angular JS之间切换

Toggle between DIV Angular JS

本文关键字：之间 JS DIV Angular      更新时间：2023-09-26

我是AnguarJS的新手。我想知道，是否有办法在不同的DIV之间切换。

比方说，在中，我有一个菜单，点击它，我想关闭当前的DIV，然后打开一个新的。

A当我打开一个潜水，点击另一个潜水时，它也会出现。

有人有个主意，想把这个传出去吗？

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;
    };

}]);

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

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

更新：

这里有一个更好的替代方案，更少更快的代码：

您可以去掉数据上的show属性，并将切换功能更改为

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

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

下面是一个工作示例：https://refork.codicode.com/xc23

希望这能有所帮助。

我会添加一个函数，将当前菜单设置为隐藏。然后它会显示首选菜单。

$scope.toggle = function toggle(menu) {
  angular.forEach($scope.Menus, function(menuIndex) {
    menuIndex.show = false;
  })
  menu.show = true;
}

我正确理解你的问题了吗？

相关文章：