Я новичок в Angular и веб-разработке в целом. Я не могу понять, как создать код для моей системы меню более элегантным способом. Я должен каким-то образом найти способ создания функции для управления состоянием меню, чтобы, когда, например, открывается меню 2, меню 1 (или любое другое меню, если на то пошло) закрывается одновременно. У меня есть скрипка, чтобы показать, что мне нужно: https://jsfiddle.net/cm70947/5e3d8j33/
Когда вы смотрите на часть контроллера и продолжаете нажимать, вы получаете идею. Функциональность в порядке, но код в контроллере ужасен для поддержания. Любая помощь высоко ценится!
Html:
<div ng-app="myApp">
<div ng-controller="menuController">
<div id="menuButton" ng-click="openMenu()">MENU - CLICK HERE</div>
<div class="mainMenu" ng-class="{'mainMenu_active' : activated}">
<ul>
<li ng-click="openFirstMenu()">menu_first</li>
<li ng-click="openSecondMenu()">menu_second</li>
</ul>
</div>
<div class="menuFirst" ng-class="{'menuFirst_active' : firstMenuActivated}">THIS IS FIRST MENU</div>
<div class="menuSecond" ng-class="{'menuSecond_active' : secondMenuActivated}">THIS IS SECOND MENU</div>
</div>
</div>
контроллер:
var app = angular.module('myApp', []);
app.controller('menuController', function($scope){
$scope.activated = false;
$scope.openMenu = function() {
$scope.activated = !$scope.activated;
$scope.secondMenuActivated = false;
$scope.firstMenuActivated = false;
};
$scope.firstMenuActivated = false;
$scope.openFirstMenu = function() {
$scope.firstMenuActivated = !$scope.firstMenuActivated;
$scope.secondMenuActivated = false;
};
$scope.secondMenuActivated = false;
$scope.openSecondMenu = function() {
$scope.secondMenuActivated = !$scope.secondMenuActivated;
$scope.firstMenuActivated = false;
};
});
Если вам не нужны дополнительные библиотеки, я создал скрипку для вас в виде простого углового, что может быть решением, которое немного более масштабируемо: https://jsfiddle.net/ypneg5z5/2/
Я попытался использовать ng-repeat, а затем использовать индекс для активации правильного подменю.
<div ng-app="myApp">
<div ng-controller="menuController">
<div id="menuButton" ng-click="openMenu()">MENU - CLICK HERE</div>
<div class="mainMenu" ng-class="{'mainMenu_active' : activated}">
<ul>
<li ng-repeat="item in menuItems" ng-click="select($index)">{{item}}</li>
</ul>
</div>
<div class="menu menu0" ng-class="{'menu_active': itemIndex===0}">THIS IS FIRST MENU</div>
<div class="menu menu1" ng-class="{'menu_active': itemIndex===1}"> THIS IS SECOND MENU</div>
<div class="menu menu2" ng-class="{'menu_active': itemIndex===2}"> THIS IS THIRD MENU</div>
<div class="menu menu3" ng-class="{'menu_active': itemIndex===3}"> THIS IS FOURTH MENU</div>
</div>
</div>
Также я иссушил ваш CSS. "menu" содержит весь стиль, разделяемый всеми подменю (я должен был установить их в положение абсолютного, чтобы заставить его работать более чем для двух меню.) "menu0" и т.д. содержит индивидуальный стиль. Вы можете, конечно, называть их все, что захотите.
Также подумайте, можете ли вы сгенерировать подменю так же, как я сделал это для пунктов меню (ng-repeat на некоторых данных в вашем контроллере). Таким образом, вам нужно будет изменить только массивы данных и стиль, если вы хотите внести изменения позже.
Возможно, вы можете использовать директиву btn-radio AngularUI для пунктов меню, а затем переключить ng-класс на основе значения btn-radio, как это
<li ng-model="model" btn-radio="'menuFirst_active'">menu1</li>
<li ng-model="model" btn-radio="'menuSecond_active'">menu2</li>
Затем в меню div:
<div class="menu" ng-class="model">BLAHBLAH</div>
Смотрите более подробную информацию здесь здесь и затем искать "БТН-радио"