여러 요소에서 ng 클릭으로 클래스 전환

여러 요소에서 ng 클릭으로 클래스 전환

ng-click으로 여러 요소에 대한 클래스를 개별적으로 전환하려면 어떻게 해야 합니까?

이 질문에서는 https://stackoverflow.com/a/22072110/2169327에서 클릭 한 번으로 클래스를 전환합니다.

CSS:

.red {
    color: red;
}

JS:

$scope.toggle = false;

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

하지만 각각의 클래스를 ng-click으로 전환해야 하는 버튼이 여러 개 있는 경우에는 어떻게 해야 합니까?

다음과 같이 설정하면:

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>
<button id="btn2" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

하나를 누르면 두 개의 버튼이 모두 전환됩니다.

회피책은 각 버튼에 대해 독자적인 ng클릭이벤트(f.ex toggle1, button2의 toggle2)를 정의하는 것입니다만, 이것이 최선의 방법입니까?

테스트를 위한 간단한 지시를 내렸습니다.

module.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

필요한 요소 전환 클래스를 만들 수 있습니다.

<button id="btn" toggle-class="active">Change Class</button>
<div toggle-class="whatever"></div>

고객의 요건에 따라서는,ng-repeat토글을 나타내는 배열이 있습니다.예를 들어 다음과 같습니다.

보기:

<div ng-repeat="toggle in toggles">
    <button id="btn" ng-click="toggle.state = !toggle.state" ng-class="{'red' : toggle.state}">Change Class</button>
</div>

컨트롤러 내부:

$scope.toggles = [{ state: true }, { state: false }, { state: true }];

이렇게 하면 어레이 또는 내부 어레이 개체를 업데이트하는 것만으로 버튼 세트를 확장할 수 있습니다(복잡성이 더 필요한 경우).

내부 제어기

 $scope.stateToggle=false;
$scope.togglelasses=function(){
     $scope.stateToggle= !$scope.stateToggle;
}

표시 중 ng 클래스 사용

 <button ng-click="togglelasses()" ng-class="stateToggle? 'active ': ' '">

클래스를 활성화하는 모든 요소에 ng-class를 추가합니다.

언급URL : https://stackoverflow.com/questions/25141139/toggle-class-with-ng-click-on-several-elements