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

97

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;
    });
javascript  angularjs  angularjs-ng-click  ng-class 
— NewKidOnTheBlock
소스
데모 또는 설명에서 목표가 무엇인지 명확하지 않습니다. 메뉴를 토글하려는 것 같지만 데모에서 메뉴 링크 만 토글하는 이유는 무엇입니까?
— charlietfl
— Prashobh

답변:

110

변수를 "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에서 작업하는 예입니다.

— Geonunez
소스
29
class예약어이므로 className대신 사용하면 YUI 컴파일러가이를 축소하지 못합니다.
— 올랜도
7
동일한 뷰에서 둘 이상의 div에이 코드를 사용하려면 어떻게해야합니까? 난 단지 선택한 클릭 한 항목에 클래스를 적용 할 수있는 방법을 모든 사업부,이 코드 actuali 변화 클래스
— xzegga
감사. Change Class 버튼을 클릭했을 때 일어나는 일을 완전히 이해하려면 콘솔을 열고 코드를보십시오.
— fidev
1
이 SO 스레드도 살펴보십시오. 질문 범위와 100 % 연결되지 않을 수도 있지만 여전히 추가 유용한 정보를 제공합니다. stackoverflow.com/questions/31047094/…
— BiLaL
144

에서 동적으로 내 코드에서 " "클래스 를 추가 하거나 제거 하고 싶습니다 .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>
— 귀여운 악마 086
소스
13
ng-init의 경우 -1입니다. AngularJS 문서에 따르면The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
— Mike Grabowski 2014 년
2
이것은 단지 그 작업을 수행하는 방법의 기본 기능을 보여주는 그대로 그냥 ... "여기"컨트롤러 부분을 피
— cutedevil086
1
`ng-class = "{ 'active': true} [selectedTab === 'users']"`의 문서화되지 않은 구문을 사용할 수도 있습니다.
— Cody
왜 이것이 효과가 있는지 이해할 수 없습니다. Angular 1.3.8에서 매우 유사한 작업을 수행하고 있으며 다른 요소를 클릭해도 조건부 클래스가 요소에서 제거되지 않습니다. 다른 요소는 다시 렌더링되지 않기 때문에 가정합니다. 그렇다면 왜 이것이 효과가 있었습니까? 이전 버전의 Angular는 단일 요소를 클릭했을 때 전체 목록을 다시 작성 했습니까?
— Matt Molnar
나는 다른 사람을 도울 수 있기 때문에 이것을 추가하는 것입니다. angular-ui-router에는 지정하는 기능 등이 있습니다. URI로 표시되는 상태를 만듭니다. 각 상태에는 하나 이상의 컨트롤러, 하나 이상의 템플릿 및 하나 이상의 뷰가 바인딩 될 수 있습니다. 링크는 ui-sref 지시문을 사용하여 생성됩니다. ui-sref-active 지시문은 상태가 활성 일 때 특정 클래스를 해당 요소에 바인딩합니다. Angular UI-Router 문서
— deadbabykitten 2015 년
12

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

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>
— artecher
소스
8

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

    .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>
— 실란
소스
태그와 지시문에 아이콘 이름이있는 이유는 무엇입니까?
— Robert Johnstone
멍청한 댓글입니다. Angular에서 무언가를 수행하는 방법을 설명 할 때 아마도 그것이 장소가 아니라는 데 동의하지만 수행하는 것이 완벽하게 합법적 인 일입니다
— bert
왜 그렇게하지 않겠습니까 : angular.element ( 'glyphicon glyphicon-pencil) .removeClass ('glyphicon glyphicon-pencil ')? angular.element는 jquery에서 $의 거의 angular의 jqLite 버전입니다. 당신은이 함수를 호출하는 서비스 나 지시를 만들고 생성자에서 removedClasses 및 addedClasses에 전달할 수
— 매트
그것은 사실이지만 나는 평범한 각도 js를 사용하려고했습니다.
— Shilan
7

당신은 정확히 옳았으며 당신이해야 할 일은 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));
};
— 잭 아가일
소스
4 

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>
스 니펫 확장

— 제이 프라 카쉬 싱
소스
2

나는 위의 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>
— Adriaan Davel
소스
2

컨트롤러에서 클래스 추가 및 제거 논리가 발생하도록 관심사를 분리하려면 다음을 수행 할 수 있습니다.

제어 장치

 (function() {
    angular.module('MyApp', []).controller('MyController', MyController);

    function MyController() {
      var vm = this;
      vm.tab = 0;

      vm.setTab = function(val) {
          vm.tab = val;
       };
      vm.toggleClass = function(val) {
          return val === vm.tab;
           };
        }
    })();

HTML

<div ng-app="MyApp">
  <ul class="" ng-controller="MyController as myCtrl">
    <li ng-click="myCtrl.setTab(0)" ng-class="{'highlighted':myCtrl.toggleClass(0)}">One</li>
    <li ng-click="myCtrl.setTab(1)" ng-class="{'highlighted':myCtrl.toggleClass(1)}">Two</li>
    <li ng-click="myCtrl.setTab(2)" ng-class="{'highlighted':myCtrl.toggleClass(2)}">Three</li>
   <li ng-click="myCtrl.setTab(3)" ng-class="{'highlighted':myCtrl.toggleClass(3)}">Four</li>
 </ul>

CSS 

.highlighted {
   background-color: green;
   color: white;
}
— 데니스와 뇨니
소스
-1

모든 사람들이 이것을 얼마나 복잡하게 만들고 있는지 믿을 수 없습니다. 이것은 실제로 매우 간단합니다. 이것을 html에 붙여 넣기 만하면됩니다 (지시문 / 컨트롤러 변경이 필요하지 않습니다- "bg-info"는 부트 스트랩 클래스입니다).

<div class="form-group col-md-12">
    <div ng-class="{'bg-info':     (!transport_type)}"    ng-click="transport_type=false">CARS</div>
    <div ng-class="{'bg-info': transport_type=='TRAINS'}" ng-click="transport_type='TRAINS'">TRAINS</div>
    <div ng-class="{'bg-info': transport_type=='PLANES'}" ng-click="transport_type='PLANES'">PLANES</div>
</div>
— 존 팔롯
소스
-1

반응성 양식의 경우-

HTML 파일

<div class="col-sm-2">
  <button type="button"  [class]= "btn_class"  id="b1" (click)="changeMe()">{{ btn_label }}</button>
</div>
스 니펫 확장

TS 파일 

changeMe() {
  switch (this.btn_label) {
    case 'Yes ': this.btn_label = 'Custom' ;
    this.btn_class = 'btn btn-danger btn-lg btn-block';
    break;
    case 'Custom': this.btn_label = ' No ' ;
    this.btn_class = 'btn btn-success btn-lg btn-block';
    break;
    case ' No ': this.btn_label = 'Yes ';
      this.btn_class = 'btn btn-primary btn-lg btn-block';
      break;
  }
스 니펫 확장

— M 싱
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.