Javascript 使用ng click在angularJs中添加和删除类

我正在尝试如何使用ngClick添加一个类。我已经把我的代码上传到plunker上了。看一下角度文档，我不知道应该怎么做。下面是我的代码片段。有人能指引我正确的方向吗

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

---

您完全正确，只需在ng click中设置selectedIndex

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>

---

您只需要将一个变量绑定到指令“ng class”中，并从控制器中更改它。以下是如何执行此操作的示例：

var-app=angular.module（“ap”，[]）；
应用控制器（“con”，功能（$scope）{
$scope.class=“红色”；
$scope.changeClass=函数（）{
如果（$scope.class==“红色”）
$scope.class=“蓝色”；
其他的
$scope.class=“红色”；
};
});
.red{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

{{class}}
换班
我想在我的代码中添加或删除“
active
”类，请在
ng上单击
，这里是我所做的

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





如果要删除以前的类并添加新类，也可以在指令中执行此操作

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

我用上面扎克·阿盖尔的建议得到了这个，我觉得非常优雅：

CSS:

HTML:



var-app=angular.module（“MyApp”，[]）；
应用控制器（“子应用控制器”，功能（$scope）{
$scope.toggle=函数（）{
$scope.isVisible=！$scope.isVisible；
};
$scope.isVisible=false；
});
如果您喜欢分离关注点，以便在控制器上进行添加和删除类的逻辑，您可以这样做

控制器

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

有一种简单而干净的方法，只使用指令就可以做到这一点

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

我真不敢相信每个人都在这么做。这其实很简单。只需将其粘贴到html中（无需指令/控制器更改-“bg info”是一个引导类）：


汽车
火车
飞机
用于反应式表单-

HTML文件



{{btn_label}}
演示或解释目标不清楚。似乎正在尝试切换菜单，但为什么您只在演示中切换菜单链接？
class
是保留字，请改用
className
，YUI编译器将无法对此进行缩小。如果我想在同一视图中对多个div使用此代码，该怎么办？这段代码实现了对所有div的更改类，我如何仅将该类应用于选中的单击项。要完全理解单击ChangeClass按钮时发生的情况，请打开控制台并查看代码。可能与问题范围没有100%的联系，但仍然提供了额外的有用信息：-1对于ng init。根据AngularJS docs-
的说法，ngInit的唯一合适用法是对ngRepeat的特殊属性进行别名，如下面的演示所示。除此之外，您还应该使用控制器而不是ngInit来初始化作用域上的值。
我只是避免使用控制器部分“here”，因为这只是为了显示如何进行初始化的基本功能……您还可以使用未记录的语法`ng class=“{'active'：true}[selectedTab=='users']”`我不明白为什么会这样。我在Angular 1.3.8中做了一些非常类似的事情，当单击另一个元素时，条件类不会从元素中删除。我会假设，因为其他元素没有被重新渲染。那么，这究竟是怎么回事？Angular的旧版本在单击单个元素时是否重新构建了整个列表？我之所以添加这个，是因为它可能会帮助其他人。angular ui router具有您指定的功能以及更多功能。您可以创建由uri表示的状态。每个状态可能有一个或多个控制器、一个或多个模板以及一个或多个绑定到它们的视图。链接是使用ui sref指令生成的。当状态为活动状态时，ui sref active指令将特定类绑定到该元素。为什么标签和指令中有图标的名称？这是一个愚蠢的评论。这是一件完全合法的事情，尽管我同意当你解释如何用angular做某事时，这可能不是一个合适的地方为什么你不直接做：angular.element（'Glypicon Glypicon pencil'）。removeClass（'Glypicon Glypicon pencil'）？element在jquery中几乎是angular的jqLite版本$。您可以创建一个服务或指令来调用这个函数，并在构造函数中传入RemovedClass和AddedClass，这是真的，但我尝试使用纯角度js。
<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;
           };
        }
    })();

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

.highlighted {
   background-color: green;
   color: white;
}

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

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