Task: you need a drop-down list, the elements of which will have 3 possible states. When you click on any element, the rest are reset to the default state, and this one goes into the next one. If this is the last state, then again on the default and so on.

Problem: I do not understand where to store the state of these objects, if I have a dropdown directive and there are dropdown-item directives in it. Whether to store in general or in each. I want to see a good explanation, competent in terms of code (if possible, without $ parent, etc.). And another problem is how to correctly link the state and the visual part so as not to pollute the layout with something like ng-class="{ state == 0 : first_state, state == 1 : second_state, state == 2 : third_state }"

Here is my "code", I need to rewrite it, but it's hard for me to understand how best to do it

 .directive('dropdown', function($compile){ return { restrict: 'AE', controller: function($scope, $element, $attrs, $transclude) { $scope.dropdown = { 'states' : { 'cost' : 0, 'dist' : 0, 'area' : 0, 'sqr' : 0 } } }, link: function($scope, elem, attrs, controller) { $scope.dropdownOpened = false; $scope.handleDropdown = function () { $scope.dropdownOpened = !$scope.dropdownOpened; } $scope.clearAll = function () { for (var st in $scope.dropdown.states) { if ($scope.dropdown.states.hasOwnProperty[st]) { $scope.dropdown.states[st] = 0; } } } } }; }) .directive('dropdownItem', ['$compile', function($compile) { var state; return { scope: false, link: function ($scope, elem, attrs) { $scope.state = $scope.$parent.dropdown.states[attrs.type]; state = $scope.state; elem.bind('click', function() { $scope.$parent.clearAll(); $scope.state = state; $scope.nextState(); }); $scope.nextState = function () { if (state == 0) { state = 1; $scope.state = 1; } else if (state == 1) { state = 2; $scope.state = 2; } else if (state == 2) { state = 0; $scope.state = 0; } } } }; }]) <dropdown class="dropdown__dropdown___3u4Vf utils__btnWideXs___1hFlV" placeholder="Сортировать"> <div class="dropdown__placeholder___32H9C" ng-click="handleDropdown()" ng-class="{dropdown__active___2Yw9D : dropdownOpened}"><span class="dropdown__activePlaceholder___391kS">Сортировать</span><span></span> <svg class="dropdown__icon___2sXCw dropdown__iconBig___Dv0Ea" icon="arrow-down"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down"></use> </svg> </div> <div class="dropdown__container___62pzX dropdown__active___2Yw9D" ng-if="dropdownOpened == true" ng-cloak> <dropdown-item type="cost" ng-class="{ state_0 : state == 0, state_1 : state == 1, state_2 : state == 2 }" class="button__btn button__md button__block button__btnInner___3h7VL">по цене</dropdown-item> <dropdown-item type="dist" ng-class="{ state_0 : state == 0, state_1 : state == 1, state_2 : state == 2 }" class="button__btn button__md button__block button__btnInner___3h7VL">по удаленности</dropdown-item> <dropdown-item type="area" ng-class="{ state_0 : state == 0, state_1 : state == 1, state_2 : state == 2 }" class="button__btn button__md button__block button__btnInner___3h7VL">по пл. участка</dropdown-item> <dropdown-item type="sqr" ng-class="{ state_0 : state == 0, state_1 : state == 1, state_2 : state == 2 }" class="button__btn button__md button__block button__btnInner___3h7VL">по пл. дома</dropdown-item> </div> </dropdown>
  • the part with the object can be replaced with an array: [first_state, second_state,third_state ][state] . Worth adding an example of what is already there - Grundy
  • @grundy There I did and stopped, because does not work at all. I would understand the very essence of what algorithm of actions - Herrgott
  • You already have an algorithm: When you click on an element, the rest are reset to the default state, and this one goes into the next one. If this is the last state, then again on the default and so on. - Grundy
  • @grundy I need a more detailed algorithm. Should I use 2 types of directives parents and its child directives. Well, better feedl with minimal functionality. I do not quite understand how to work correctly with osprey. Here I personally did something like $scope.dropdown= { 'states' : { 'cost' : false, 'distance' : false, 'area' : false } } in the parent directive, and then did the <dropdown-item type='cost'></dropdown-item> and so on and so it’s embarrassing to show. I understand that this is not correct and not reusable - Herrgott
  • Show what you have, you need at least to know in which direction you were moving. Otherwise, you can simply advise to use a ready-made dropdown, for example from bootstrap - Grundy

0