Question

我是AngualrJS的新手。我想知道，如果能够在不同的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);
    });
};

更新

这是一个更好的选择，更少和更快的代码：

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

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

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

这是一个有效的例子：http://refork.com/xc23

希望这会有所帮助。

Answer 2

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

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

我是否正确理解了您的问题？

在DIV Angular JS之间切换

2 个答案:

更新