[javascript] ng-click을 사용하여 angularJs에서 클래스 추가 및 제거

ngClick으로 클래스를 추가하는 방법을 시도하고 있습니다. 내 코드를 plunker에 업로드했습니다 . 여기를 클릭하십시오 . 각도 문서를 보면 정확한 방법을 알 수 없습니다. 아래는 내 코드의 일부입니다. 누군가 나를 올바른 방향으로 인도 할 수 있습니까?

 <div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>

제어 장치

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });

답변

변수를 “ng-class”지시문에 바인딩하고 컨트롤러에서 변경하기 만하면됩니다. 다음은이를 수행하는 방법의 예입니다.

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

app.controller("con",function($scope){
  $scope.class = "red";
  $scope.changeClass = function(){
    if ($scope.class === "red")
      $scope.class = "blue";
    else
      $scope.class = "red";
  };
});

.red{
  color:red;
}

.blue{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
  <div ng-class="class">{{class}}</div>
  <button ng-click="changeClass()">Change Class</button>    
</body>

스 니펫 확장

다음은 jsFiddle에서 작업하는 예입니다.

답변

에서 동적으로 내 코드에서 ” “클래스 를 추가 하거나 제거 하고 싶습니다 .activeng-click

<ul ng-init="selectedTab = 'users'">
   <li ng-class="{'active':selectedTab === 'users'}" ng-click="selectedTab = 'users'"><a href="#users" >Users</a></li>
   <li ng-class="{'active':selectedTab === 'items'}" ng-click="selectedTab = 'items'"><a href="#items" >Items</a></li>
</ul>

답변

지시문만으로 간단하고 깨끗한 방법이 있습니다.

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>

답변

이전 클래스를 제거하고 새 클래스를 추가하려면 지시문에서 수행 할 수도 있습니다.

    .directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                if(element.attr("class") == "glyphicon glyphicon-pencil") {
                    element.removeClass("glyphicon glyphicon-pencil");
                    element.addClass(attrs.toggleClass);
                } else {
                    element.removeClass("glyphicon glyphicon-ok");
                    element.addClass("glyphicon glyphicon-pencil");
                }
            });
        }
    };
});

템플릿에서 :

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>

답변

당신은 정확히 옳았으며 당신이해야 할 일은 ng-click에서 selectedIndex를 설정하는 것입니다.

ng-click="selectedIndex = 1"

다음은 ng-view를 변경하고 현재 선택된 뷰의 버튼을 강조하는 버튼 세트를 구현 한 방법입니다.

<div id="sidebar" ng-init="partial = 'main'">
    <div class="routeBtn" ng-class="{selected:partial=='main'}" ng-click="router('main')"><span>Main</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view1'}" ng-click="router('view1')"><span>Resume</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view2'}" ng-click="router('view2')"><span>Code</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view3'}" ng-click="router('view3')"><span>Game</span></div>
  </div>

그리고 이것은 내 컨트롤러에서.

$scope.router = function(endpoint) {
    $location.path("/" + ($scope.partial = endpoint));
};

답변

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });

<div ng-show="isVisible" ng-class="{'active':isVisible}" class="block"></div>

스 니펫 확장

답변

나는 위의 Zack Argyle의 제안을 사용하여 이것을 얻었습니다.

CSS :

.active {
    background-position: 0 -46px !important;
}

HTML :

<button ng-click="satisfaction = 'VeryHappy'" ng-class="{active:satisfaction == 'VeryHappy'}">
    <img src="images/VeryHappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Happy'" ng-class="{active:satisfaction == 'Happy'}">
    <img src="images/Happy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Indifferent'" ng-class="{active:satisfaction == 'Indifferent'}">
    <img src="images/Indifferent.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Unhappy'" ng-class="{active:satisfaction == 'Unhappy'}">
    <img src="images/Unhappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'VeryUnhappy'" ng-class="{active:satisfaction == 'VeryUnhappy'}">
    <img src="images/VeryUnhappy.png" style="height:24px;" />
</button>