Как изменить класс отдельно для каждого элемента? (Угловая)

У меня есть демоверсия, когда при щелчке она меняет класс назад и стоит, но я не могу понять, как их менять отдельно.Как изменить класс отдельно для каждого элемента? (Угловая)

Вот демо для лучшего объяснения: http://jsfiddle.net/pWG2S/1260/

Я мог бы добавить подобную строку кода в JS с class2, class3 и т.д., но проблема в том, что этот класс будет повторяться много раз. Если у вас есть идеи по устранению этой проблемы, это было бы здорово. Спасибо заранее

$scope.changeClass = function(){ 
     if ($scope.class === "rotated") 
      $scope.class = "rotated2"; 
     else 
      $scope.class = "rotated"; 
    };

источник

2016-06-13 Frutis

Обычно ваши повторяющиеся элементы будут связаны с повторением структуры данных в области действия модели. Затем вы можете использовать свойства каждого элемента, чтобы помочь определить соответствующий класс. Казалось бы, вы упростили демо. Каков ваш реальный случай использования в мире? – charlietfl

Я создаю складной контент, когда вы нажимаете изображение svg, оно вращается -90degress, проблема в том, что если я нажму на любой svg, изменение класса применяется для каждого svg. – Frutis

Хорошо .... но являются ли разделы контента/svg не отображаемыми на основе модели данных в контроллере? Вот как обычно работают угловые приложения – charlietfl

Просто измените class быть массивом, а затем пройти каждый индекс:

$scope.changeClass = function(i){ 
    if ($scope.class[i] === "red") 
     $scope.class[i] = "blue"; 
    else 
     $scope.class[i] = "red"; 
};

Fiddle here

источник

2016-06-13 03:55:57 typologist

Эй, ваш ответ правильный, но теперь есть еще одна проблема. http://prntscr.com/bfpu35. Если я нажму на красный квадрат, он изменится для каждого элемента ng-repeat. Любые идеи, как это исправить? – Frutis

Я помету ваш ответ как правильный, вы сделали в основном то, что я хотел. Я, вероятно, создаю новый поток, касающийся другой проблемы, которую я имею сейчас. Cheers – Frutis

Уверен, разместите новый (возможно, есть еще один класс, который вы используете для цвета ваших стрелок?). – typologist

Пусть думать о сделать директиву для каждой секции:

<div ng-class="class">{{class}}</div> 
<button ng-click="changeClass()">Change Class</button>

Затем вы можете контролировать объем внутри каждой директивы, и это будет легко для вас, чтобы расширить позже.

Это пример: http://jsfiddle.net/pWG2S/1271/

источник

2016-06-13 03:34:41

, но я не понимаю, что вы подразумеваете под этим, код, который вы написали, точно такой же, как в моем примере. – Frutis

Ужасные парни. Я пытаюсь сделать пример, чтобы у меня мало времени, но надежда может вам помочь: http://jsfiddle.net/pWG2S/1271/ –

Я не уверен, что это работает, но в моем случае я не могу использовать какие-либо шаблоны, он должен выглядеть для класса = "класс". Ответ типолога почти работает по назначению. – Frutis

Как насчет этого?

Контроллер

var app = angular.module("ap",[]); 

app.controller("con",function($scope){ 

    $scope.klasses = ["red", "blue", "yellow"]; 
    $scope.klassIndex = 0; 

    $scope.changeClass = function(){ 
     var newKlassIndex = ($scope.klassIndex+1)%$scope.klasses.length; 
     $scope.klassIndex = newKlassIndex; 
    }; 
});

Посмотреть

<body ng-app="ap" ng-controller="con"> 
    <div ng-repeat="klass in klasses"> 
    <div ng-class="klasses[klassIndex]">{{klasses[klassIndex]}}</div> 
    <button ng-click="changeClass()">Change Class</button> 
    </div> 
</body>

Таким образом, новый класс может быть добавлен в $ scope.klasses с новым соответствующим правилом CSS.

Рабочая Демонстрационный
http://jsfiddle.net/pWG2S/1267/

источник

2016-06-13 03:40:30 Benny

Возможно, вы неправильно поняли мой вопрос, моя цель состоит в том, чтобы сделать это при щелчке, каждая кнопка будет меняться отдельно, теперь все сразу меняются, та же проблема, что и в моей демонстрации. – Frutis

HTML:

<body ng-app="ap" ng-controller="con"> 
    <div ng-class="class">{{class}}</div> 
    <button id="button1" ng-click="changeClass($event)">Change Class</button> 
    <div ng-class="class1">{{class1}}</div> 
    <button id="button2" ng-click="changeClass($event)">Change Class</button> 
</body>

JS:

var app = angular.module("ap",[]); 

app.controller("con",function($scope){ 

$scope.class = "red"; 
$scope.class1 = "red"; 
$scope.changeClass = function(event){ 
console.log(event.currentTarget.id); 
if(event.currentTarget.id === "button1") 
    if ($scope.class === "red") 
     $scope.class = "blue"; 
     else 
      $scope.class = "red"; 
    else if(event.currentTarget.id === "button2") 
     if ($scope.class1 === "red") 
     $scope.class1 = "blue"; 
     else 
      $scope.class1 = "red"; 
    }; 
    });

Fiddle

Я должен был переработан код немного больше. Однако моя первоначальная идея заключается в том, что вам нужно будет пройти в $event вместе с ng-click и предоставить идентификаторы кнопке для того, чтобы однозначно идентифицировать их через event.currentTarget.id

Также скрипку из Nghi Нгуен имеет смысл сделать это с директивой так как ваш же набор элементов в два раза. Инкапсулируйте их внутри директивы. Таким образом, вам даже не нужно использовать $ event, чтобы определить идентификатор вашей кнопки, и контроллер будет обрабатывать changeClass только для определенной директивы.

EDIT1:

var app = angular.module("ap",[]); 

app.controller("con",function($scope){ 

$scope.class = "red"; // default class 

$scope.changeClass = function($event){ 
    if ($($event.target).prev().hasClass('red')) { 
    $($event.target).prev().removeClass('red').addClass('blue'); 
    } else { 
    $($event.target).prev().removeClass('blue').addClass('red'); 
    } 
    }; 
});

HTML:

<body ng-app="ap" ng-controller="con"> 
    <div ng-class="class">{{class}}</div> 
    <button ng-click="changeClass($event)">Change Class</button> 
    <div ng-class="class">{{class}}</div> 
    <button ng-click="changeClass($event)" >Change Class</button> 
</body>

источник

2016-06-13 04:16:40 Pushpendra

Эй, спасибо за ответ. Я хотел бы избежать добавления дополнительных атрибутов. Должно быть гораздо более легкие способы сделать это, как писал типолог. Я думаю, что ваш ответ будет иметь такую же проблему, как я прокомментировал его ответ. – Frutis

См. Edit1 – Pushpendra

Извините, но это не сработает. Не могли бы вы взглянуть на типологический ответ и посмотреть на текущую проблему? – Frutis

Как изменить класс отдельно для каждого элемента? (Угловая)

ответ

Смежные вопросы