我是新来的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;
};
}]);
2条答案
按热度按时间hrysbysz1#
您可以隐藏所有菜单,只显示选定的菜单,按如下方式更改切换功能:
更新:
下面是一个更好的替代方案,代码更少,速度更快:
您可以去掉数据的show属性,并将toggle函数更改为
并将您的
ng-show
更改为ng-show="Menu.id==(activeMenu || 1)"
下面是一个工作示例:https://refork.codicode.com/xc23
希望这对你有帮助。
6ie5vjzr2#
我会添加一个函数,将当前菜单设置为隐藏。然后它会显示首选菜单。
我理解你的问题对吗?