Angular 1.5 получить переменную из меню и установить для нее значение true

Question 1

Угловой 1.5

Я создаю меню, которое при ng-click = я получаю переменную, а затем при установке ng-class этой переменной в значение true для меню и содержимого.

Цель состоит в том, чтобы добавить / удалить активный класс в родительский и в контентный div.

Не могу понять это

<div ng-controller="myCtrl">
<ul>
  <li class="animate" ng-class="{activelist: fonts ==!hidden }">
  <a ng-click="activeMenu('fonts')" class="nav-icon">
                         menu font
  </a>
</li>
  <li class="animate" ng-class="{activelist: edit ==!hidden }">
  <a ng-click="activeMenu('edit')" class="nav-icon">
                         menu edit
  </a>
</li>
<ul>
<div class="">
<div class="fonttext" ng-class="{activelist: fonts ==!hidden }"></div>
<div class="edittext" ng-class="{activelist: edit ==!hidden }" ></div>
</div>
</div>


<script>
var myapp = angular.module('app', []);

myapp.controller('myCtrl', function($scope){
  $scope.activeMenu = function (menuvar){
//getting the variable that gets passed via func
$scope.variable = menuvar;

// set the variable to be true no working
$scope.menuvar  = true;

  }

});
</script>

angularjs

0

Chris Tarasovs 8 Янв 2017 в 00:37

Answer

Вы можете установить переменную прямо в ng-click на true. Затем эту переменную можно использовать в ng-class для динамического добавления или удаления классов. Вот пример:

<li class="animate" ng-class="{'activelist': fonts }">
    <a ng-click="fonts = !fonts" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': edit }">
    <a ng-click="edit = !edit" class="nav-icon"></a>
</li>

Вы также можете установить переменную в контроллере:

HTML:

<li class="animate" ng-class="{'activelist': menu.fonts }">
    <a ng-click="switchMenu('fonts')" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': menu.edit }">
    <a ng-click="switchMenu('edit')" class="nav-icon"></a>
</li>

Контроллер:

$scope.menu = {};
$scope.switchMenu = function(selectedMenu) {
    $scope.menu[selectedMenu] = !$scope.menu[selectedMenu];
};

1

ssc-hrep3 8 Янв 2017 в 01:26

Да, но это означает, что каждый ng-щелчок будет другим. Я пытаюсь получить функцию, чтобы мой HTML оставался чистым с одной функцией вместо этого для каждого пункта меню unquic. Также это устанавливает значение true, но после того, как это правда, я не могу его выключить

–

Chris Tarasovs

8 Янв 2017 в 00:41

Это отлично подходит для небольшого меню, но все же идея скрытого скрипта находится в вызове функции, как мне установить переменную в значение true. Моя цель - при нажатии ng-click я могу скрыть несколько меню и другое шоу. Поэтому, когда я нажимаю на пункт меню, я могу показывать только некоторые дочерние меню. и когда я нажимаю на дочернее меню, я хочу скрыть родительский элемент. Вот почему я пытаюсь выяснить, как передать переменную в функции и установить некоторые из них как истинные или ложные.

–

Chris Tarasovs

8 Янв 2017 в 00:56

Я добавил еще одно решение, где логика находится в контроллере. Однако я бы не советовал это решение - даже с большим меню и т. Д. Вы можете легко сгенерировать большой HTML-код с помощью ng-repeat и по-прежнему управлять им непосредственно в HTML. Я бы рекомендовал поместить эти значения в переменную области видимости, чтобы предотвратить конфликты имен в области действия контроллера.

–

ssc-hrep3

8 Янв 2017 в 01:29

Да, это идеально! это то, что мне нужно.

–

Chris Tarasovs

8 Янв 2017 в 01:47

Вы можете проголосовать за и принять ответ, если хотите.

–

ssc-hrep3

8 Янв 2017 в 03:48

Question 2

Вы можете установить переменную прямо в ng-click на true. Затем эту переменную можно использовать в ng-class для динамического добавления или удаления классов. Вот пример:

<li class="animate" ng-class="{'activelist': fonts }">
    <a ng-click="fonts = !fonts" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': edit }">
    <a ng-click="edit = !edit" class="nav-icon"></a>
</li>

Вы также можете установить переменную в контроллере:

HTML:

<li class="animate" ng-class="{'activelist': menu.fonts }">
    <a ng-click="switchMenu('fonts')" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': menu.edit }">
    <a ng-click="switchMenu('edit')" class="nav-icon"></a>
</li>

Контроллер:

$scope.menu = {};
$scope.switchMenu = function(selectedMenu) {
    $scope.menu[selectedMenu] = !$scope.menu[selectedMenu];
};

1

ssc-hrep3 8 Янв 2017 в 01:26

Да, но это означает, что каждый ng-щелчок будет другим. Я пытаюсь получить функцию, чтобы мой HTML оставался чистым с одной функцией вместо этого для каждого пункта меню unquic. Также это устанавливает значение true, но после того, как это правда, я не могу его выключить

–

Chris Tarasovs

8 Янв 2017 в 00:41

Это отлично подходит для небольшого меню, но все же идея скрытого скрипта находится в вызове функции, как мне установить переменную в значение true. Моя цель - при нажатии ng-click я могу скрыть несколько меню и другое шоу. Поэтому, когда я нажимаю на пункт меню, я могу показывать только некоторые дочерние меню. и когда я нажимаю на дочернее меню, я хочу скрыть родительский элемент. Вот почему я пытаюсь выяснить, как передать переменную в функции и установить некоторые из них как истинные или ложные.

–

Chris Tarasovs

8 Янв 2017 в 00:56

Я добавил еще одно решение, где логика находится в контроллере. Однако я бы не советовал это решение - даже с большим меню и т. Д. Вы можете легко сгенерировать большой HTML-код с помощью ng-repeat и по-прежнему управлять им непосредственно в HTML. Я бы рекомендовал поместить эти значения в переменную области видимости, чтобы предотвратить конфликты имен в области действия контроллера.

–

ssc-hrep3

8 Янв 2017 в 01:29

Да, это идеально! это то, что мне нужно.

–

Chris Tarasovs

8 Янв 2017 в 01:47

Вы можете проголосовать за и принять ответ, если хотите.

–

ssc-hrep3

8 Янв 2017 в 03:48

Angular 1.5 получить переменную из меню и установить для нее значение true

1 ответ

Похожие вопросы

Новые вопросы

angularjs