如何使用ng-click切换类
ng-click是AngularJS框架中的一个指令，用于在HTML元素上绑定点击事件。通过ng-click指令，可以实现在用户点击元素时触发相应的函数或操作。
使用ng-click切换类的步骤如下：
- 在HTML元素中添加ng-click指令，并指定要触发的函数或操作。例如：
<button ng-click="toggleClass()">点击切换类</button>- 在AngularJS的控制器中定义toggleClass函数，用于切换类。例如：
$scope.toggleClass = function() {
$scope.isClassActive = !$scope.isClassActive;
};- 在控制器中定义一个变量isClassActive，用于控制类的切换。初始状态下，可以设置为false。例如：
$scope.isClassActive = false;- 在HTML元素中使用ng-class指令，根据isClassActive变量的值来切换类。例如：
<button ng-click="toggleClass()" ng-class="{ 'active': isClassActive }">点击切换类</button>在上述示例中，当用户点击按钮时，会调用toggleClas函数，该函数会将isClassActive变量的值取反。同时，ng-class指令会根据isClassActive变量的值来切换类。当isClassActive为true时，按钮会添加active类；当isClassActive为false时，按钮会移除active类。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
如何使用ng-click分别切换几个元素上的类？
在这个问题中，通过单击来切换类，如下所示：
CSS：
.red {
color: red;
}
JS：
$scope.toggle = false;
HTML：
<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>
但是，如果我有几个按钮，每个按钮都应该使用ng-click切换自己的类，那该怎么办呢？
如果我这样设置
浏览 2提问于2014-08-05得票数 34
回答已采纳
你好，我面临的问题是使Li成为活动选项卡，我已经添加了悬停效果，但是如何添加活动选项卡？我用户的角度是ng显示和ng隐藏，以改变图标在李。这是我的密码
<li ng-mouseenter="show = true" ng-mouseleave="show = false" id="home">
<img src="images/home.png" ng-hide="show" class="whiteClass" />
<img src=
浏览 1提问于2014-07-03得票数 2
回答已采纳
我有这个代码
<body>
<table border = 1>
<tr>
<td>Art</td>
<td ng-repeat="x in books0" ng-click="clicked(0, x.name)">{{x.name}}</td>
</tr>
<tr>
<td>Science</td>
浏览 2提问于2017-04-29得票数 0
我需要让代码在条件为真的情况下才能工作
if document.getElementByClass('toggle').style.visibility == 'visible'
它应该像是在我的页面上写的
ng-click="toggle = !toggle"
但是如何在javascript文件中选择切换状态呢？
编辑:更多信息
div(ng-controller='ViewsCtrl', ng-class="toggle ? 'nav-open' : 'nav'")
.con
浏览 0提问于2015-11-03得票数 1
这里有一个文章清单，我不知道如何对ng-重复中的每一篇新文章执行ng-click函数调用。现在，它适用于现有文章，但是当动态添加新文章(通过AJAX)时，我也需要这些文章具有相同的功能。
例如：ng-click函数调用"+“符号来显示社交按钮，在通过AJAX插入新文章(即:删除文章，让列表再次填充新元素)后，它似乎无法工作。
AngularJS是否提供了这样做的任何工具？
<div>
<div>
<input type="text" ng-model="search">
<span>{{
浏览 0提问于2013-12-02得票数 0
3回答
我有一个设置，其中一个div隐藏并显示以下div，以创建一个折叠div。我使用变量ng-显示div，而执行隐藏/显示的div是
<div ng-click="costSummary=!costSummary" ng-class="{open : costSummary}">
单击div可以切换变量和类(在内部设置一个标头，用于显示三角形)。效果很好。
但是，我需要在ng-重复中使用这个构造，我不知道如何增加这个变量，以便每个迭代都有一个惟一的类。如：
<div ng-click="myVar1=!myVar1" ng-class
浏览 0提问于2015-01-28得票数 3
回答已采纳
使用Capybara (最新版本，2.4.X)，我如何点击链接‘最后100个关闭帐户’在下面的启动带(最新3.2)拆分按钮？忽略ng-click，因为它是AngularJS指令。
<div class="btn-group">
<button ng-click="recent(50)" class="btn btn-default">
<i class="fa fa-refresh"></i> Refresh
</button>
<button c
浏览 4提问于2014-07-27得票数 0
回答已采纳
我正在使用 jQuery插件创建一个模态，我在上面有一些具有ng-click="setId(11)“的链接。
问题是它只能工作一次。在第一次单击之后，不再调用函数setId。将打开模式，但链接和ng-click不会执行任何操作。
模式：
<div id="basic-modal-content">
<a href ng-click="setId(11)" class="simplemodal-close">11</a>
<a href ng-click="setId(16)
浏览 0提问于2015-05-03得票数 0
由于某种原因，我的ng-click / ng-class组合无法工作。单击“hide”类时，必须根据productDisplay变量的相等性添加类。
<div ng-repeat="product in project.data track by $index">
<p ng-click="productDisplay = $index"><strong>{{product.name}}</strong></p>
浏览 2提问于2015-03-06得票数 1
回答已采纳
如何使按钮工作为切换，我的函数是类似于这个->
$scope.update=(id, command)=> {
if (command === "remove") {
//logic to remove
} else if (command === "add") {
//logic to add
}
}
在这里，我需要在ng-click中将id和命令作为参数传递。
<button ng-clic
浏览 4提问于2021-12-22得票数 1
回答已采纳
1回答
我有一些奇怪的事情发生在这里。
我得到了以下指令：
app.directive('addscroller', function () {
return function (scope, elm, attrs) {
// jQuery Script triggern
// AngularJS: jQuery(selector) = element.
elm.ready(function () {
elm.nano
浏览 3提问于2013-01-15得票数 0
回答已采纳
3回答
我想知道是否有一种方法可以将ng-click添加为属性？
假设我想添加ng-click，如果我的<li>有一个someClass类
angular.element(root.querySelector('li.someClass').attr({'ng-click': 'someFunc()'});
当<li>有一个类anotherClass时，我想要重置ng-click：
angular.element(root.querySelector('li.someClass').attr({'ng-cl
浏览 1提问于2015-08-05得票数 1
有谁能提供正确的方法来实现这个JSFiddle：
<style>
.red #btn{
background-color:red;
}
.blue #btn{
background-color:blue;
}
</style>
<body ng-app="ap" ng-controller="con">
<button id="btn" ng-click="changeClass()">Change Class</button>
浏览 5提问于2014-02-27得票数 10
回答已采纳
我希望在单击按钮时需要进行多个css更改。
ex：ng-click="myStyle={'background-color':'black'}; myStyle={color:'blue'}"
浏览 7提问于2014-08-11得票数 0
回答已采纳
当我单击“显示更多”按钮时，我需要增加p元素的高度，然后该按钮应该说“显示更少”，然后再次单击该按钮时减小p元素的大小。用角度来做这件事的最好方法是什么？
这是我的段落和按钮的结构-
<p ng-bind="MyController.notes"></p>
<button class="button show-button" ng-click="MyController.showMore()">Show More</button>
浏览 1提问于2015-01-14得票数 0
回答已采纳
我有一个仪表板样式的小部件容器，它包含一个标题面板。标题面板中有几个图标，实现了以下功能：
1)折叠小部件2)最大化小部件3)启动小部件设置4)关闭小部件
第二项是我遇到麻烦的地方。我需要交换最大的图标与还原图标时，它被点击。
使用折叠行为作为指导，我可以使用ng-class切换图标，但是我的ng-click将是不同的，因为我在指令中调用了一个方法。
<div class="widget-header panel-heading">
<h3 class="panel-title">
<span class="wid
浏览 6提问于2015-04-01得票数 0
回答已采纳
使ngClass表达式成为条件表达式的任何方法。例如，我使用javascript尝试了以下操作：
$scope.setEnabled = function(status){
$scope.filterEnabled = status;
if(status){
angular.element(document.querySelector( '#enabledFalse')).removeClass('active-btn');
angular.element(document.querySelector( '#en
浏览 3提问于2015-03-08得票数 1
我遇到了ng类的问题，在一些奇怪的边缘情况下，它会将我想要添加的类应用到元素中，但是将"-add“连接到类名中。我认为这可能与这个类有关，它允许动画作为过渡状态应用，没有"-add“的类应该在之后立即应用，但它只是因为某种原因而被困在"-add类”上。
这是第四个div上带有ng类的html代码：
<div layout="column" hide-gt-sm show-sm class="desktop-dropdown">
<div flex class="context-container ham-
浏览 1提问于2015-12-07得票数 1
回答已采纳
你好，我有几个按钮想要过滤数据，但当我再次单击该按钮时，我想不出如何使它解除筛选。我使用正常的过滤表达式，例如：
<tr ng-repeat='ledata in datas | filter:thecondition'></tr>
如果按下的按钮可能会有所不同，则该按钮的代码如下
ng-click="thecondition = {type: 1}"
还有，我怎样才能用ng类来标记呢？让按钮看起来像按了吗？谢谢。
浏览 7提问于2014-08-27得票数 2
回答已采纳
1回答
我想在页面上显示很多电话号码，每个号码最初都显示为“短”电话。
<div ng-controller="MyCtrl">
<div ng-click="showFull()">{{phone1 | short}}</div>
<div ng-click="showFull()">{{phone2 | short}}</div>
<div ng-click="showFull()">{{phone3 | short}}</div>
&
浏览 5提问于2014-08-04得票数 2
回答已采纳
使用以下分页html和中继器：
<ul id="ProductListPagination" class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
浏览 3提问于2014-11-14得票数 1
回答已采纳
1回答
我正在用AngularJS对数据进行排序。我在AngularJS文档中看到了一个例子。我不明白reverse=!reverse在index.html中是什么意思。以下是代码：
div ng-controller="ExampleController">
<table class="friend">
<tr>
<th><a href="" ng-click="reverse=false;order('name', false)">Name&
浏览 6提问于2014-08-08得票数 0
我正在开发一个Angular.js应用程序，它可以过滤医疗程序的json文件。我希望在使用ng-click单击过程名称(在同一页面上)时显示每个过程的详细信息。这就是我到目前为止所拥有的，将.procedure-details div设置为display:none：
<ul class="procedures">
<li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp">
<h4><a href="
浏览 2提问于2013-05-21得票数 100
回答已采纳
2回答
我正在开发一个应用程序，它在我的主视图中有一个边栏和两个div。我正试图在容器内将两者的高度平分。我试过身高= 50%，但效果不太好。
<div id="mainView" ng-controller="userCtrl">
<div id="top">
<div id="topRow">
<label for="entityDropDown">Select a user: </l
浏览 2提问于2014-01-23得票数 0
回答已采纳
6回答
我正在尝试创建一个切换按钮在角度。到目前为止，我所拥有的是：
<div class="btn-group">
<a class="btn btn-primary pull-right"
ng-click="toggleArchive(true)"
ng-show="!patient.archived">Archive patient</a>
<a class="btn btn-danger pull-right"
ng-click=&#
浏览 0提问于2013-04-27得票数 29
回答已采纳
2回答
我在angularjs的两个窗口之间交替使用ng-click和ng-show：
<div ng-init="showTab2 = false">
<a ng-click="showTab2 = true; showTab1 = false ">#Tab1 </a>
</div>
<div ng-init="showTab2 = true">
<a ng-click="showTab1 = true; show
浏览 6提问于2016-06-01得票数 0
回答已采纳
2回答
我使用角-ui折叠来隐藏和显示2列，所以当用户单击图标时，它将隐藏/显示列，现在当两列被隐藏时，我希望10列是12列。是否有可能完成这项任务？
main.html
<span class="glyphicon glyphicon-th-list" class="btn btn-default" ng-click="isCollapsed = !isCollapsed" id="treelist"></span>
<div class="row">
<div class=
浏览 6提问于2016-10-25得票数 1
回答已采纳
3回答
我试图让按钮只在点击一个按钮，但由于我使用ng-重复，它所有的变化在一起。如何修复它，使其只在单击的那一个上改变？
HTML：
<ul>
<li class="displaySubCategory" ng-repeat="communityTheme in community | startFrom:currentPage*pageSize | limitTo:pageSize">
<div class="categoryImg">
浏览 0提问于2018-10-31得票数 1
回答已采纳
1回答
因此，既然我在这里无法回答我的问题： --也许这是不可能的？
我一直在努力工作，至少能完成我想做的事情。
这是我的手风琴：
<button class="panel accBtn" ng-click="status.isFirstOpen = !status.isFirstOpen;runThat()">Buildings<span class="caret"></span></button>
<accordion class="m3Details">
浏览 4提问于2015-06-08得票数 1
回答已采纳
2回答
我想把这个换成jQuery..。请帮助：
$('.toggle').on('click', function() {
$('.container').addClass('active');
});
$('.close').on('click', function() {
$('.container').removeClass('active');
});
这是我的index.html：
<div class="container">
浏览 2提问于2016-02-20得票数 0
回答已采纳
1回答
添加重复项目动画不能正常工作
、、、、
参见，添加项目的动画仅在第一个项目从列表中删除时才起作用。如何解决这个问题？
css：
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
height: 0px;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.
浏览 0提问于2015-06-23得票数 2
1回答
我正在Laravel做一个项目。在刀片文件中，我有图像的评级选项。当我点击next按钮，然后不需要重新加载页面时，我就会显示带有分级的图像，与前面的按钮相同。用户可以在click上更改评级，这也是通过ajax调用完成的。现在我的问题是，我想要将一个活动类添加到一个分级按钮中，每当我执行下一个prev操作时，它都应该处理活动类的事情。我实在解决不了这个问题。
<ul class="btnforimages">
<li>
<strong>Rate this photo:</strong>
</li
浏览 2提问于2018-01-15得票数 0
1回答
上下文
我有一个数组hand。我正在使用ng-repeat="card in hand"迭代卡片。我要ng-click="select(card)"用上面的卡片做点什么。
当使用hand的初始值时，这很好，但是一旦我开始向hand数组添加卡片，ng-click就不再触发。
问题
如何让ng-click在动态数组上的ng-repeat中触发？
代码(简化)
card.html：
<div>
<h1>{{data.title}}</h1>
<p>{{data.description}}</p>
浏览 3提问于2015-12-28得票数 3
回答已采纳
1回答
我尝试使用我的控制器应用程序=angular.module(‘Pack’，‘ngAnimate’)中包含的ng动画；这是我的风格：
<style>
.animate-in {
opacity: 0;
max-height: 0;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.animate-out{
浏览 3提问于2015-04-28得票数 0
回答已采纳
1回答
我需要切换到Div，默认情况下Div的class="wrapper"必须是可见的。Div class="form"必须在管理员批准后显示。问题是当我点击<a ng-click="toggle()">时，它只工作一次，之后就没有反应了。如果我将一些ng-hide添加到'wrapper'，ng-click可以工作，但只显示/隐藏‘表单’。与class="form"一样，必须在控制器响应后显示<a>。
HTML：
<div class="body" ng-class="
浏览 37提问于2016-07-17得票数 2
回答已采纳
Firebug秀：<a class="ng-binding" ng-click="goto(menu.MenuInfo.Href)">
FirePath展示：html/body/nav/div[1]/div[1]/ul/li[3]/a
当我使用Firebug或FirePath查找web元素时，它显示如下；然后我将其复制到Selenium IDE Target text并单击find按钮，但它找不到web元素。如何找到web元素并使其在Selenium IDE中运行以记录脚本？
浏览 1提问于2016-03-31得票数 0
2回答
因此，我试图从列表项中添加/删除一个类，这取决于变量：(注意，如果有更好的方法，请让我知道:P )
所以我的代码是这样的：
<li ng-repeat="fold in folds" class="{{selectedFolder == fold.filter ? 'active' : ''}}">
<a ng-click="selectedFolder = fold.filter">
{{fold.name}}
</a>
</li>
浏览 2提问于2015-10-21得票数 3
回答已采纳
是否有一种简单的声明性方法(在$scope中没有附加的函数)来用AngularJS标记单击元素？
我有一个按钮，我想要标记为点击/检查。
<button ng-model="form.btn" ng-click=" // do stuff here to add a class or attr ">Go</button>
我能够通过外部函数实现这一点，但我正在寻找一种声明式的方式/所有的HTML模板。
浏览 7提问于2014-07-04得票数 1
回答已采纳
2回答
*注意：-红色为背景-蓝色为图像
如何在移动视图中使用CSS/Bootstrap或其他工具编写从纵向模式到横向模式的UI代码，我正在使用ionic进行开发。
这是我的代码：
<ion-view view-title="Home">
<ion-content class="padding" style="background-color:#616161">
<div class="row row-center row-assertive" style="margin:3
浏览 0提问于2017-05-31得票数 0
1回答
我试图通过单击md-tabs元素的最后一个选项卡来显示菜单。如果我单击选项卡标签，我可以显示菜单，但如果我单击选项卡的空白区域，它的行为与往常一样，显示相关的选项卡。
如何将标签行为扩展到整个选项卡？
下面是一些代码
<md-tabs class="stretch-height" flex md-selected="mbpSelectedIndex" md-border-bottom
md-dynamic-height>
<md-tab ng-repeat="tab in mbpTabs" md-on-select=
浏览 7提问于2017-01-19得票数 0
回答已采纳
1回答
日安！我的代码有一个跨度。类包含通过span显示的图像。一旦用户单击了图像，它的类就会改变，当单击另一个span时，它应该返回到原来的类。
<span alt="Mode1" ng-class="{'mode': isActive}" ng-click="activeButton()" ></span></span>
在我的控制器上
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isAct
浏览 1提问于2016-04-01得票数 0
回答已采纳
我知道您可以很容易地切换一个类，如下所示：
.c {
padding: 20px;
background: #00adff;
}
.a {
background: #43dd31;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<div class="c" ng-class="{'a'
浏览 10提问于2018-08-21得票数 0
回答已采纳
4回答
这似乎不适合我。我有ng-repeat，ng-click和ng-class在tr上。单击tr应该将类切换到.error。
当前，单击tr将更改所有表行的类。
<!doctype html>
<html lang="en" ng-app="studentApp">
<head>
<meta charset="UTF-8">
<style>
.is-grey-true { background-color: #ccc; }
.error { b
浏览 3提问于2014-03-27得票数 5
回答已采纳
这是我的html文件。如何将选中/活动按钮设置为粗体。
<md-menu md-position-mode="target-right target">
<stx-action-view-options ng-click="ctrl.viewOptMenu($mdMenu, $event)" desc="View options"></stx-action-view-options>
<md-menu-content style="max-height:
浏览 18提问于2018-02-06得票数 0
3回答
在我的项目中，我需要在一个ng-show中同时使用ng-hide和ng-hide。我觉得这是个糟糕的做法。
html代码：
<div ng-hide="itemDIv2" ng-show="itemDIv2">
<input type="text" placeholder="Item Name" ng-model="itemname">
<div>
<input type="submit" class="btn"
浏览 0提问于2016-07-06得票数 7
回答已采纳
我是AngularJs的新手，需要帮助。我在index.html中有两个组件(欢迎和聊天)和两个可在它们之间切换的测试按钮。
<div ng-switch on ='view'>
<button ng-click='view="welcome"'>Welcome</button>
<button ng-click='view="chat"'>Chat</button>
<welcome ng-switch-when='
浏览 2提问于2021-07-09得票数 0
3回答
我有一个搜索页面和一个高级搜索选项。只有少数用户可以访问高级搜索选项。所以我的div高度应该相应地增加，而且我还需要将我的背景图像更改为更大的尺寸。我如何才能做到这一点？
AngularJS：
$scope.advanceSearch = function(){
$scope.adSearch=true;
$scope.freeSearch = false;
$scope.showAdvance = "true";
};
Html：
<div class="row advanceFilter">
<a cla
浏览 0提问于2016-12-23得票数 1
我有一个非常简单的例子(参见: http://plnkr.co/edit/w15Ov5T3vMXK7bfC34M2?p=preview](])) )
我使用ng-repeat指令来显示我的数据。
数据以“组”的形式出现。在每个组中，我都有动态数据和静态数据。
我希望让用户能够切换，即每个组中动态数据的可见性。
在我的html中，我为每个组设置了两个按钮:一个使用onclick，另一个使用ng-click。
在每个按钮上，我还添加了一个虚拟属性data-private-index，其值为"{{$index}}"，以确保角进行适当的替换。
这个很管用。当我在浏览器中插入元素时，替换
浏览 1提问于2015-06-20得票数 1
有两个单选按钮，offline和online
<input type="radio" name="mode" ng-click="offlineFn()" >Offline
<input type="radio" name="mode" ng-click="onlineFn()">Online
ng-单击脱机是ng-click="offlineFn()“。
在加载页面本身时应该调用此fn。
浏览 4提问于2015-01-20得票数 0
回答已采纳
当我点击特定的菜单项时，我试着只做一个菜单项作为active.But，我会激活所有菜单项。
我想要删除以前的活动菜单项，并使当前单击的菜单项为active.Can任何人请帮助我解决这个问题。
我的js：
angular.module('myapp')
.controller('myCtrl', function ($scope) {
$scope.isActive = true;
$scope.highlight = function () {
if (!$(event.target).hasC
浏览 1提问于2016-02-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
