Я пытаюсь переключить свои два элемента, поэтому, если щелкнуть один элемент, он удалит все ссылки моего класса и применит его к себе. Любые идеи?
<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>
Ура!
Создайте свойство 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:
Вы пробовали с условием в 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>
Мне кажется, что лучшим решением является использование директивы; нет необходимости, чтобы контроллер знал, что представление обновляется.
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" ). Вы можете повторно использовать эту директиву в любом месте своего проекта, а не только на одном контроллере.
Как правило, с помощью 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;
}
Я только меняю/удаляю класс:
function removeClass() {
var element = angular.element('#nameInput');
element.removeClass('nameClass');
};
HTML
<span ng-class="{'item-text-wrap':viewMore}" ng-click="viewMore= !viewMore"></span>
Невозможно ответить на hitautodestruct напрямую, недостаточно репутации, но не рекомендуется использовать функции JQuery, смешанные с Angular. Angular поддерживает облегченную версию JQuery.
Чтобы узнать больше об этом, я расскажу вам о документации, которая очень хорошо написана по этому вопросу.