html 在DIVAngular JS之间切换

vlurs2pr  于 2022-11-27  发布在  Angular
关注(0)|答案(2)|浏览(135)

我是新来的AngualrJS。我想知道,如果有一些方法来切换不同的DIV的。
比如说,在我有一个菜单,通过点击它,我想关闭当前的DIV,并打开一个新的。
A的时刻,如果我一个潜水是开放的,我点击另一个它也出现。
有没有人有个主意,把这件事解决掉?
于飞:

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

    };

}]);
hrysbysz

hrysbysz1#

您可以隐藏所有菜单,只显示选定的菜单,按如下方式更改切换功能:

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

更新:

下面是一个更好的替代方案,代码更少,速度更快:
您可以去掉数据的show属性,并将toggle函数更改为

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

并将您的ng-show更改为ng-show="Menu.id==(activeMenu || 1)"
下面是一个工作示例:https://refork.codicode.com/xc23
希望这对你有帮助。

6ie5vjzr

6ie5vjzr2#

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

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

我理解你的问题对吗?

相关问题