Angular.js Как изменить элемент класса css на клик и удалить все остальные

Я пытаюсь переключить свои два элемента, поэтому, если щелкнуть один элемент, он удалит все ссылки моего класса и применит его к себе. Любые идеи?

<span id="1" ng-style="my-class" ng-click="tog=my-class"></span>

<span id="2" ng-style="my-class" ng-click="tog=my-class"></span>

Ура!

Ответ 1

Создайте свойство scope с именем selectedIndex и функцию itemClicked:

function MyController ($scope) {
  $scope.collection = ["Item 1", "Item 2"];

  $scope.selectedIndex = 0; // Whatever the default selected index is, use -1 for no selection

  $scope.itemClicked = function ($index) {
    $scope.selectedIndex = $index;
  };
}

Тогда мой шаблон будет выглядеть примерно так:

<div>
      <span ng-repeat="item in collection"
             ng-class="{ 'selected-class-name': $index == selectedIndex }"
             ng-click="itemClicked($index)"> {{ item }} </span>
</div>

Только для справки $index - это волшебная переменная, доступная в директивах ng-repeat.

Вы можете использовать этот же образец внутри директивы и шаблона.

Вот рабочий plnkr:

http://plnkr.co/edit/jOO8YdPiSJEaOcayEP1X?p=preview

Ответ 2

Вы пробовали с условием в ng-классе, как здесь: http://jsfiddle.net/DotDotDot/zvLvg/?

    <span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span>
    <span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span>

Ответ 3

Мне кажется, что лучшим решением является использование директивы; нет необходимости, чтобы контроллер знал, что представление обновляется.

Javascript:

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

angular.module('directives', []).directive('toggleClass', function () {
    var directiveDefinitionObject = {
        restrict: 'A',
        template: '<span ng-click="localFunction()" ng-class="selected"  ng-transclude></span>',
        replace: true,
        scope: {
            model: '='
        },
        transclude: true,
        link: function (scope, element, attrs) {
            scope.localFunction = function () {
                scope.model.value = scope.$id;
            };
            scope.$watch('model.value', function () {
                // Is this set to my scope?
                if (scope.model.value === scope.$id) {
                    scope.selected = "active";
                } else {
                    // nope
                    scope.selected = '';
                }
            });
        }
    };
    return directiveDefinitionObject;
});

HTML:

<div ng-app="app" ng-init="model = { value: 'dsf'}"> <span>Click a span... then click another</span>

<br/>
<br/>
<span toggle-class model="model">span1</span>

<br/><span toggle-class model="model">span2</span>

<br/><span toggle-class model="model">span3</span>

CSS

.active {
     color:red;
 }

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

Причиной использования директив является то, что вы больше не зависите от контроллера. На самом деле у меня нет контроллера вообще (я определяю переменную в представлении с именем "model" ). Вы можете повторно использовать эту директиву в любом месте своего проекта, а не только на одном контроллере.

Ответ 4

Как правило, с помощью Angular вы выведете эти интервалы с помощью директивы ngRepeat и (как и в вашем случае), каждый элемент будет иметь идентификатор. Я знаю, что это неверно для всех ситуаций, но типично, если запрос данных из бэкэнд-объектов в массиве имеет тенденцию иметь уникальные идентификаторы.

Этот идентификатор можно использовать для облегчения переключения классов по элементам в вашем списке (см. plunkr или код ниже).

Использование идентификатора объектов также может устранить нежелательный эффект, когда $index (описанный в других ответах) испорчен из-за сортировки в Angular.

Пример Plunkr: http://plnkr.co/edit/na0gUec6cdMABK9L6drV

(в основном применять класс .active-selection, если person.id равно $scope.activeClass - который мы устанавливаем, когда пользователь нажимает элемент.

Надеюсь, это кому-то поможет, я нашел выражения в ng-классе очень полезными!

HTML

<ul>
  <li ng-repeat="person in people" 
  data-ng-class="{'active-selection': person.id == activeClass}">
    <a data-ng-click="selectPerson(person.id)">
      {{person.name}}
    </a>
  </li>
</ul>

JS

app.controller('MainCtrl', function($scope) {
  $scope.people = [{
    id: "1",
    name: "John",
  }, {
    id: "2",
    name: "Lucy"
  }, {
    id: "3",
    name: "Mark"
  }, {
    id: "4",
    name: "Sam"
  }];

  $scope.selectPerson = function(id) {
    $scope.activeClass = id;
    console.log(id);
  };
});    

CSS

.active-selection {
  background-color: #eee;
}

Ответ 5

Я только меняю/удаляю класс:

   function removeClass() {
                    var element = angular.element('#nameInput');
          element.removeClass('nameClass');
   };

Ответ 6

HTML

<span ng-class="{'item-text-wrap':viewMore}" ng-click="viewMore= !viewMore"></span>

Ответ 7

Невозможно ответить на hitautodestruct напрямую, недостаточно репутации, но не рекомендуется использовать функции JQuery, смешанные с Angular. Angular поддерживает облегченную версию JQuery.

Чтобы узнать больше об этом, я расскажу вам о документации, которая очень хорошо написана по этому вопросу.

https://docs.angularjs.org/api/ng/function/angular.element