AngularJS Add - удалить классы из списка ng-repeat - PullRequest
Новая
       3

AngularJS Add - удалить классы из списка ng-repeat

0 голосов
/ 14 мая 2019

Коллеги, есть такой пример для наглядности. 

[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
  s.addEventListener('click', function() {
    [...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
      arr[i].classList.remove('li-example-active');
    })
    arr[i].classList.add('li-example-active');
  })
})
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 20px;
  letter-spacing: 3px;
}
li.li-example-active{
  background-color: #00c;
}
<menu class="example">
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
</menu>

Я не думаю, что необходимо объяснять, что происходит в приведенном выше примере.

И пример на AngularJS

const app = angular.module('app', []);

app.directive('example', function() {
  return {
    restrict: "C",
    link: function(scope, element, attrs) {
      scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
    }
  }
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example-active {
  background-color: #00c;
}
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-repeat="example in myExample"
      ng-click="active = !active" 
      ng-class="active ? '' : 'li-example-active'">
      <span>{{example}}</span>
  </li>
</menu>
<html>

А как в этом варианте реализовать этот пример как в первом классическом варианте JS ????Чтобы элементу, по которому щелкнули, был присвоен класс li-example-active, а остальным был удален класс li-example-active ???

1 Ответ

1 голос
/ 15 мая 2019

Создать массив и функцию для управления этим массивом.

Используйте их в HTML 

<menu class="example">
  <li class="li-example" ng-repeat="example in myExample"
      ng-click="makeActive($index)" 
      ng-class="{'li-example-active': activeArr[$index]}">
      <span>{{example}}</span>
  </li>
</menu>

Реализуйте их в контроллере: 

app.controller('example', function($scope) {
     $scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
     $scope.activeArr = $scope.myExample.map(_ => false);
     $scope.makeActive=function(index) {
         Object.keys($scope.activeArr).forEach( _ => {
              $scope.activeArr[_] = (_ == index);
         });
     };
});

ДЕМО 

const app = angular.module('app', []);

app.controller('example', function($scope) {
     $scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
     $scope.activeArr = $scope.myExample.map(_ => false);
     $scope.makeActive=function(index) {
         Object.keys($scope.activeArr).forEach( _ => {
              $scope.activeArr[_] = (_ == index);
         });
     };
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example-active {
  background-color: #00c;
}
<html ng-app="app" ng-controller="example">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-repeat="example in myExample"
      ng-click="makeActive($index)" 
      ng-class="{'li-example-active': activeArr[$index]}">
      <span>{{example}}</span>
  </li>
</menu>
<html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...