การเพิ่มและลบคลาสใน angularJs โดยใช้ ng-click


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;
    });

ไม่ชัดเจนจากการสาธิตหรือการอธิบายว่าวัตถุประสงค์คืออะไร ดูเหมือนจะพยายามสลับเมนู แต่ทำไมคุณแค่สลับลิงค์เมนูในการสาธิต?
charlietfl

คำตอบ:


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


29
classเป็นคำสงวนใช้classNameแทนคอมไพเลอร์ YUI จะไม่สามารถย่อขนาดนี้ได้
Orlando

7
แล้วถ้าฉันต้องการใช้โค้ดนี้กับ div มากกว่าหนึ่งตัวในมุมมองเดียวกันล่ะ? รหัสนี้เปลี่ยนคลาสสำหรับ div ทั้งหมดฉันจะใช้คลาสเฉพาะกับรายการที่คลิกที่เลือกได้อย่างไร
xzegga

ขอบคุณ. เพื่อให้เข้าใจอย่างถ่องแท้ว่าเกิดอะไรขึ้นเมื่อคลิกปุ่มเปลี่ยนคลาสให้เปิดคอนโซลและดูรหัส
fidev

1
ดูหัวข้อ SO นี้ด้วย อาจไม่เชื่อมโยงกับขอบเขตคำถาม 100% แต่ยังให้ข้อมูลที่เป็นประโยชน์เพิ่มเติม: stackoverflow.com/questions/31047094/…
BiLaL

144

ฉันต้องการที่จะเพิ่มหรือลบ " 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>

13
-1 สำหรับ ng-init อ้างอิงจากเอกสาร 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

2
ฉันแค่หลีกเลี่ยงส่วนควบคุม "ที่นี่" เพราะนี่เป็นเพียงการแสดงการทำงานพื้นฐานของวิธีการทำเท่านั้น ...
cutedevil086

1
คุณยังสามารถใช้ไวยากรณ์ที่ไม่มีเอกสารของ `` ng-class = "{'active': true} [selectedTab === 'users']"
Cody

ฉันไม่เข้าใจว่าทำไมถึงได้ผล ฉันกำลังทำสิ่งที่คล้ายกันมากใน Angular 1.3.8 และคลาสเงื่อนไขจะไม่ถูกลบออกจากองค์ประกอบเมื่อมีการคลิกอื่น ฉันคิดว่าเพราะองค์ประกอบอื่น ๆ ไม่ได้แสดงผลใหม่ แล้วทำไมถึงได้ผล? Angular เวอร์ชันเก่าสร้างใหม่ทั้งรายการเมื่อคลิกองค์ประกอบเดียวหรือไม่
Matt Molnar

ฉันแค่เพิ่มสิ่งนี้เพราะมันอาจช่วยคนอื่นได้ angular-ui-router มีฟังก์ชันที่คุณระบุและอื่น ๆ อีกมากมาย คุณสร้างสถานะที่แสดงโดย uri แต่ละรัฐอาจมีตัวควบคุม 1 ตัวขึ้นไปแม่แบบ 1 ตัวขึ้นไปและมุมมอง 1 หรือมากกว่าที่ผูกไว้กับพวกเขา ลิงก์ถูกสร้างขึ้นโดยใช้คำสั่ง ui-sref คำสั่ง ui-sref-active จะผูกคลาสเฉพาะกับองค์ประกอบนั้นเมื่อสถานะแอ็คทีฟ เอกสาร Angular UI-Router
deadbabykitten


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 เป็นเวอร์ชัน jqLite ของ $ ใน jquery คุณสามารถสร้างบริการหรือคำสั่งที่เรียกใช้ฟังก์ชันนี้และส่งผ่านใน removeClasses และ addedClasses ในตัวสร้าง
MattE

นั่นเป็นเรื่องจริง แต่ฉันพยายามใช้ js เชิงมุมธรรมดา
Shilan

7

คุณมีถูกต้องทั้งหมดที่คุณต้องทำคือตั้งค่า selectedIndex ใน ng-click ของคุณ

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>

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 ของคุณ (ไม่จำเป็นต้องมีการเปลี่ยนแปลง directive./controller - "bg-info" คือคลาส bootstrap):

<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;
  }

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.