thêm và xóa các lớp trong angleJ bằng cách sử dụng ng-click

97

Tôi đang cố gắng làm cách nào để thêm một lớp với ngClick. Tôi đã tải mã của mình lên plunker Bấm vào đây . Nhìn vào tài liệu góc cạnh, tôi không thể tìm ra cách chính xác nó nên được thực hiện. Dưới đây là một đoạn mã của tôi. Ai đó có thể hướng dẫn tôi đi đúng hướng không

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

Bộ điều khiển

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

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

        $scope.isVisible = false;
    });

— Đứa trẻ mới về khối
nguồn

không rõ ràng từ bản demo hoặc giải thích mục tiêu là gì. Có vẻ như bạn đang cố chuyển đổi menu, nhưng tại sao bạn chỉ chuyển đổi liên kết menu trong bản demo?

— charlietfl

angulartutorial.net/2016/05/…

— Prashobh

110

Bạn chỉ cần ràng buộc một biến vào chỉ thị "ng-class" và thay đổi nó từ bộ điều khiển. Đây là một ví dụ về cách làm điều này:

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>

Mở rộng đoạn mã

Đây là ví dụ làm việc trên jsFiddle

— geonunez
nguồn

29

classlà một từ dành riêng, hãy sử dụng classNamethay thế, trình biên dịch YUI sẽ không thể giảm thiểu điều này.

— Orlando

7

Còn nếu tôi muốn sử dụng mã này cho nhiều div trong cùng một chế độ xem thì sao? này lớp thay đổi mã actuali cho tất cả div, làm thế nào tôi có thể áp dụng lớp chỉ để được lựa chọn nhấp mục

— xzegga

Cảm ơn. Để hiểu đầy đủ điều gì đang xảy ra khi nhấp vào nút Lớp thay đổi, hãy mở bảng điều khiển và xem mã.

— fidev

1

Cũng có một cái nhìn vào chủ đề SO này. Có thể không được 100% liên kết với phạm vi câu hỏi nhưng vẫn cung cấp thêm thông tin hữu ích: stackoverflow.com/questions/31047094/...

— Bilal

144

Tôi muốn thêm hoặc loại bỏ " active" class trong mã của tôi tự động trên ng-click, đây là những gì tôi đã làm.

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

— cutedevil086
nguồn

13

-1 cho ng-init. Theo AngularJS docs -

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

Tôi chỉ tránh các phần điều khiển "ở đây", vì đây là chỉ cho hiển thị các chức năng cơ bản của làm thế nào để làm điều đó ...

— cutedevil086

1

Bạn cũng có thể sử dụng cú pháp không có giấy tờ của `ng-class =" {'active': true} [selectTab === 'users'] "`

— Cody

Tôi không hiểu tại sao điều này sẽ hoạt động. Tôi đang làm điều gì đó rất tương tự trong Angular 1.3.8 và lớp điều kiện không bị xóa khỏi một phần tử khi một phần tử khác được nhấp vào. Tôi sẽ giả sử vì các phần tử khác không được hiển thị lại. Tại sao sau đó, điều này đã từng hoạt động? Các phiên bản cũ của Angular có xây dựng lại toàn bộ danh sách khi một phần tử được nhấp vào không?

— Matt Molnar

Tôi chỉ thêm điều này vì nó có thể giúp ích cho người khác. angle-ui-router có chức năng mà bạn đang chỉ định và hơn thế nữa. Bạn tạo các trạng thái được biểu thị bằng một tiểu. Mỗi trạng thái có thể có 1 hoặc nhiều bộ điều khiển, 1 hoặc nhiều mẫu và 1 hoặc nhiều dạng xem bị ràng buộc với chúng. Các liên kết được tạo bằng chỉ thị ui-sref. Chỉ thị ui-sref-active sẽ ràng buộc một lớp cụ thể với phần tử đó khi trạng thái đang hoạt động. Tài liệu về Angular UI-Router

— deadbabykitten

12

Có một cách đơn giản và rõ ràng để thực hiện việc này chỉ với các lệnh.

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

— người làm nghệ thuật
nguồn

8

bạn cũng có thể làm điều đó trong một chỉ thị, nếu bạn muốn xóa lớp trước đó và thêm một lớp mới

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

và trong mẫu của bạn:

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

— Shilan
nguồn

tại sao bạn có tên của các biểu tượng trong thẻ và lệnh?

— Robert Johnstone

Đó là một nhận xét ngu ngốc. Đó là một điều hoàn toàn hợp pháp để làm mặc dù tôi đồng ý rằng nó có lẽ không phải nơi dành cho nó khi bạn đang giải thích làm thế nào để làm điều gì đó trong góc

— bert

tại sao bạn không làm: angle.element ('glyphicon glyphicon-pencil) .removeClass (' glyphicon glyphicon-pencil ')? angle.element là phiên bản jqLite của $ trong jquery khá nhiều. Bạn chỉ có thể tạo ra một dịch vụ hoặc chỉ thị mà các cuộc gọi chức năng này và vượt qua trong removedClasses và addedClasses trong constructor

— Matte

Điều đó đúng, nhưng tôi đã cố gắng sử dụng js góc đơn giản.

— Shilan

7

Bạn hoàn toàn đúng, tất cả những gì bạn phải làm là đặt selectIndex trong ng-click của bạn.

ng-click="selectedIndex = 1"

Đây là cách tôi triển khai một tập hợp các nút thay đổi chế độ xem và đánh dấu nút của chế độ xem hiện được chọn.

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

và điều này trong bộ điều khiển của tôi.

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

— Zack Argyle
nguồn

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>

Mở rộng đoạn mã

— Jay Prakash Singh
nguồn

2

Tôi đã sử dụng gợi ý của Zack Argyle ở trên để có được điều này, mà tôi thấy rất thanh lịch:

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
nguồn

2

Nếu bạn muốn tách các mối quan tâm ra sao cho logic để thêm và xóa các lớp xảy ra trên bộ điều khiển, bạn có thể làm điều này

người điều khiển

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

— Dennis Wanyonyi
nguồn

-1

Tôi không thể tin rằng mọi người lại làm điều này phức tạp như thế nào. Điều này thực sự rất đơn giản. Chỉ cần dán cái này vào html của bạn (không yêu cầu thay đổi chỉ thị / bộ điều khiển - "bg-info" là một lớp 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>

— john pallot
nguồn

-1

đối với các dạng Reactive -

Tệp HTML

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

Mở rộng đoạn mã

Tệp 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ở rộng đoạn mã

— M Singh
nguồn