ng-click을 사용하여 angularJs에서 클래스 추가 및 제거
ngClick으로 클래스를 추가하는 방법을 시도하고 있습니다.코드를 플런커에 업로드했습니다.여기를 클릭해 주세요.각진 문서를 보면 정확한 방법을 알 수 없습니다.다음은 제 코드의 일부입니다.누가 나를 올바른 방향으로 인도해 줄 수 있나요?
<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;
});
" 추가 또는 삭제"active" 코드의 클래스는 동적으로ng-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>
변수를 명령어 "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에 대한 작업 예입니다.
지시사항만으로 이를 수행할 수 있는 간단하고 깨끗한 방법이 있습니다.
<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클릭으로 인덱스를 만듭니다.
ng-click="selectedIndex = 1"
ng뷰를 변경하고 현재 선택된 뷰의 버튼을 강조 표시하는 버튼 세트를 구현한 방법은 다음과 같습니다.
<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>나는 이것을 얻기 위해 위의 잭 아길의 제안을 사용했는데, 나는 이것이 매우 우아하다고 생각한다.
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>
컨트롤러에서 클래스 추가 및 삭제 로직이 발생하도록 관심사 분리를 원할 경우 이 작업을 수행할 수 있습니다.
컨트롤러
(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;
}
모두가 이걸 얼마나 복잡하게 만드는지 믿을 수가 없어.이것은 사실 매우 간단합니다.이것을 html에 붙여넣기만 하면 됩니다(지시는 필요 없습니다./controller 변경은 필요 없습니다.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>
반응형 폼의 경우 -
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;
}언급URL : https://stackoverflow.com/questions/20460369/adding-and-removing-classes-in-angularjs-using-ng-click
'programing' 카테고리의 다른 글
| 폼 입력에 포커스가 있는지 확인 (0) | 2023.03.05 |
|---|---|
| 컨트롤러에서 폼 제출을 트리거할 수 있습니까? (0) | 2023.03.05 |
| 스프링 부팅 시 폴더 요청이 "index.html" 파일에 매핑되지 않음 (0) | 2023.03.05 |
| JSONC가 뭐죠?JSONC와 JSON-C는 다른가요? (0) | 2023.03.05 |
| 각도 JS 필터가 동일하지 않음 (0) | 2023.03.05 |