blocks|key|184688|text|您完全正确，您所要做的就是在ng-click中设置selectedIndex。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|184689|ng-click="selectedIndex+=+1"|code-block|syntax|javascript|184690|下面是我如何实现一组更改ng-view的按钮，并突出显示当前选定视图的按钮。|184691|<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>|184692|这个在我的控制器里。|184693|$scope.router+=+function(endpoint)+{
++++$location.path("/"+%2B+($scope.partial+=+endpoint));
};|184694|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You have it exactly right, all you have to do is set selectedIndex in your ng-click.</p>

<pre><code>ng-click="selectedIndex = 1"
</code></pre>

<p>Here is how I implemented a set of buttons that change the ng-view, and highlights the button of the currently selected view.</p>

<pre><code>&lt;div id="sidebar" ng-init="partial = 'main'"&gt;
    &lt;div class="routeBtn" ng-class="{selected:partial=='main'}" ng-click="router('main')"&gt;&lt;span&gt;Main&lt;/span&gt;&lt;/div&gt;
    &lt;div class="routeBtn" ng-class="{selected:partial=='view1'}" ng-click="router('view1')"&gt;&lt;span&gt;Resume&lt;/span&gt;&lt;/div&gt;
    &lt;div class="routeBtn" ng-class="{selected:partial=='view2'}" ng-click="router('view2')"&gt;&lt;span&gt;Code&lt;/span&gt;&lt;/div&gt;
    &lt;div class="routeBtn" ng-class="{selected:partial=='view3'}" ng-click="router('view3')"&gt;&lt;span&gt;Game&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>and this in my controller.</p>

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


blocks|key|184735|text|您只需要将一个变量绑定到指令"ng-class“中，然后从控制器更改它。下面是一个如何做到这一点的示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|184736|​|184737|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";
++};
});|code-block|syntax|javascript|184738|.red{
++color:red;
}

.blue{
++color:blue;
}|184739|<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>|184740|184741|以下是在jsFiddle上工作的示例|offset|length|184742|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/geonunez/pWG2S/^0|0|0|0|0|0|0|4|8|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@$P|16|Q|17|1|18]]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>You just need to bind a variable into the directive "ng-class" and change it from the controller. Here is an example of how to do this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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";
  };
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.red{
  color:red;
}

.blue{
  color:blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;body ng-app="ap" ng-controller="con"&gt;
  &lt;div ng-class="class"&gt;{{class}}&lt;/div&gt;
  &lt;button ng-click="changeClass()"&gt;Change Class&lt;/button&gt;    
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>Here is the example working on <a href="http://jsfiddle.net/geonunez/pWG2S/">jsFiddle</a></p>


blocks|key|184761|text|如果要删除以前的类并添加新类，也可以在指令中执行此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|184762|++++.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");
++++++++++++++++}
++++++++++++});
++++++++}
++++};
});|code-block|syntax|javascript|184763|在您的模板中：|184764|<i+class="glyphicon+glyphicon-pencil"+toggle-class="glyphicon+glyphicon-ok"></i>|184765|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>you can also do that in a directive, if you want to remove the previous class and add a new class</p>

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

<p>and in your template:</p>

<pre><code>&lt;i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;
</code></pre>


blocks|key|4690613|text|我使用了上面Zack+Argyle的建议来得到这个，我发现它非常优雅：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4690614|CSS：|4690615|.active+{
++++background-position:+0+-46px+!important;
}|code-block|syntax|javascript|4690616|HTML：|4690617|<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>|4690618|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I used Zack Argyle's suggestion above to get this, which I find very elegant:</p>

<p>CSS:</p>

<pre><code>.active {
    background-position: 0 -46px !important;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;button ng-click="satisfaction = 'VeryHappy'" ng-class="{active:satisfaction == 'VeryHappy'}"&gt;
    &lt;img src="images/VeryHappy.png" style="height:24px;" /&gt;
&lt;/button&gt;
&lt;button ng-click="satisfaction = 'Happy'" ng-class="{active:satisfaction == 'Happy'}"&gt;
    &lt;img src="images/Happy.png" style="height:24px;" /&gt;
&lt;/button&gt;
&lt;button ng-click="satisfaction = 'Indifferent'" ng-class="{active:satisfaction == 'Indifferent'}"&gt;
    &lt;img src="images/Indifferent.png" style="height:24px;" /&gt;
&lt;/button&gt;
&lt;button ng-click="satisfaction = 'Unhappy'" ng-class="{active:satisfaction == 'Unhappy'}"&gt;
    &lt;img src="images/Unhappy.png" style="height:24px;" /&gt;
&lt;/button&gt;
&lt;button ng-click="satisfaction = 'VeryUnhappy'" ng-class="{active:satisfaction == 'VeryUnhappy'}"&gt;
    &lt;img src="images/VeryUnhappy.png" style="height:24px;" /&gt;
&lt;/button&gt;
</code></pre>


blocks|key|4690630|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4690631|var+app+=+angular.module("MyApp",+[]);
app.controller("subNavController",+function+($scope){

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

++++++++$scope.isVisible+=+false;
++++});|code-block|syntax|javascript|4690632|<div+ng-show="isVisible"+ng-class="{'active':isVisible}"+class="block"></div>|4690633|4690634|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div ng-show="isVisible" ng-class="{'active':isVisible}" class="block"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4690640|text|有一种简单明了的方法，只需使用指令就可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4690641|<div+ng-class="{'class-name':+clicked}"+ng-click="clicked+=+!clicked"></div>|code-block|syntax|javascript|4690642|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>There is a simple and clean way of doing this with only directives.</p>

<pre><code>&lt;div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"&gt;&lt;/div&gt;
</code></pre>


blocks|key|184871|text|我不敢相信每个人都在做这样复杂的事情。这实际上非常简单。只需将其粘贴到您的html中(不需要指令./controller更改-+"bg-info“是一个引导程序类)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|184872|<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>|code-block|syntax|javascript|184873|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I can't believe how complex everyone is making this. This is actually very simple. Just paste this into your html (no directive./controller changes required - "bg-info" is a bootstrap class):</p>

<pre><code>&lt;div class="form-group col-md-12"&gt;
    &lt;div ng-class="{'bg-info':     (!transport_type)}"    ng-click="transport_type=false"&gt;CARS&lt;/div&gt;
    &lt;div ng-class="{'bg-info': transport_type=='TRAINS'}" ng-click="transport_type='TRAINS'"&gt;TRAINS&lt;/div&gt;
    &lt;div ng-class="{'bg-info': transport_type=='PLANES'}" ng-click="transport_type='PLANES'"&gt;PLANES&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|184905|text|对于反应式表单-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|184906|HTML文件|184907|​|184908|<div+class="col-sm-2">
++<button+type="button"++[class]=+"btn_class"++id="b1"+(click)="changeMe()">{{+btn_label+}}</button>
</div>|code-block|syntax|javascript|184909|184910|TS文件|184911|184912|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;
++}|184913|184914|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Y|8|@]|9|@]|A|$]]|$1|N|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|H|7|10|8|@]|9|@]|A|$I|J]]|$1|Q|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

<p>for Reactive forms -</p>

<p>HTML file</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-sm-2"&gt;
  &lt;button type="button"  [class]= "btn_class"  id="b1" (click)="changeMe()"&gt;{{ btn_label }}&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>TS file </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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;
  }</code></pre>
</div>
</div>
</p>


<p>I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker <a href="http://plnkr.co/edit/YRzOYU3gIBa1OfGOBSA0?p=preview">Click here</a>. Looking at the angular documentation i can't figure out the exact way it should be done. Below is a snippet of my code. Can someone guide me in the right direction</p>

<pre><code> &lt;div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"&gt;&lt;/div&gt;
</code></pre>

<p>Controller</p>

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

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

        $scope.isVisible = false;
    });
</code></pre>


adding and removing classes in angularJs using ng-click

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试如何使用ngClick添加一个类。我已经把我的代码上传到plunker 上了。看了一下angular文档，我想不出应该怎么做。下面是我的代码片段。有人能给我指引正确的方向吗？ <div ng-show="isVisible" ng-class="{'selected': $index==selectedInd...

问使用ng-click在angularJ中添加和删除类
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ng-click在angularJ中添加和删除类EN