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

2023-11-27

我正在尝试如何使用 ng Click 添加课程。我已经将我的代码上传到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;
    });

我想要add or remove "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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 ng-click 在 angularJs 中添加和删除类 的相关文章

  • 如何按多个项目搜索/过滤列表?

    我正在寻找一个示例 或者可能是一个关于通过在文本框中输入的多个项目来过滤 搜索项目列表的方法的一点提示 假设我有一个列表 ul li Coffee li li Tea li li Milk li li Water li li Juice l
  • 按键对 JavaScript 对象进行排序

    我需要按键对 JavaScript 对象进行排序 因此 以下内容 b asdsad c masdas a dsfdsfsdf 会成为 a dsfdsfsdf b asdsad c masdas 这个问题的其他答案已经过时 与实施现实不符 并
  • Elasticsearch 跨多个索引搜索 - 忽略不存在的索引

    我有弹性集群 其中我的索引包含当前日期 例如 example idex 2016 07 26 gt exists example idex 2016 07 25 gt exists example idex 2016 07 24 gt do
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 为什么隐式符号到字符串转换会导致 JavaScript 中出现类型错误?

    有一个 toString on Symbol在 ES6 中 它返回字符串表示形式Symbol 但想知道为什么 Symbol 不起作用 运行这个表达式会抛出TypeError我没想到 后者只是打电话吗 toString 在一个新的Symbol
  • JavaScript - 无需布尔值即可运行一次

    有没有办法只运行一段JavaScript代码ONCE 而不使用布尔标志变量来记住它是否已经运行过 具体来说not就像是 var alreadyRan false function runOnce if alreadyRan return a
  • 如何在 Sequelize ORM 中限制连接行(多对多关联)?

    Sequelize 定义了两种模型 具有多对多关联的 Post 和 Tag Post belongsToMany db Tag through post tag foreignKey post id timestamps false Tag
  • 在动态创建的元素上添加事件监听器[重复]

    这个问题在这里已经有答案了 是否可以向所有动态生成的元素添加事件侦听器 Javascript 我不是页面的所有者 因此我无法以静态方式添加侦听器 对于页面加载时创建的所有元素 我使用 doc body addEventListener cl
  • React 应用程序中的 addEventListener 不起作用

    一些背景 我正在尝试消费自定义网络组件在 React 应用程序中并尝试监听来自 Web 组件的事件 我相信您不能只在自定义 Web 组件上以通常的反应方式处理事件 i e
  • Cosmos DB Mongo API 如何管理“请求率很大”情况

    我有以下代码 async function bulkInsert db collectionName documents try const cosmosResults await db collection collectionName
  • 如何循环遍历对象数组并生成键值对?

    我有一个像这样的对象数组 let someObj items id 12 value true id 34 value true id 56 value false 我想将其添加到现有对象中 其中 id 是该对象的键 如下所示 let ob
  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • jQuery 悬停时滚动到 div 并返回到第一个元素

    我基本上有一个具有设定尺寸的 div 和overflow hidden 该 div 包含 7 个子 div 但一次只显示一个 我希望当它们各自的链接悬停时能够平滑地垂直滚动 但是 第一部分 div 没有链接 并且是没有悬停链接时的默认部分
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • 根据特定字符获取整个字符串或子字符串

    我有一个包含 MIME 类型的字符串 例如application json 现在我想将其与实际的 HTTP 标头进行比较 在本例中content type 如果标头包含 MIME 类型 那么就很简单 if mimeType contentT
  • Django 将 JSON 数据传递给静态 getJSON/Javascript

    我正在尝试从 models py 中获取数据并将其序列化为views py 中的 JSON 对象 模型 py class Platform models Model platformtype models CharField max len
  • Angular Material 日期选择器选择的默认日期

    这对我的日期选择器有帮助 http demo agektmr com datalist 现在在这个date picker我想要默认选择今天的日期 谁能帮我如何设置默认日期 谢谢 在我用过的有角材料中this http demo agektm
  • 如何获得 JavaScript 阶乘程序的循环来显示所使用的工作?

    你好 我面临着用 JavaScript 编写一个程序的挑战 尽管我对它不太了解 但它要求用户输入一个数字 然后计算该数字的阶乘 我使用了已经提出的问题并设法使计算正常工作 但无法获得所需的输出 我必须在以下输出中获取它 而不使用任何花哨的库
  • 用javascript调用外部网页(跨域)

    我正在尝试使用以下网络服务来验证提要这个问题 https stackoverflow com questions 11996430 check if a url is a valid feed 但浏览器不允许我向另一台服务器发送 ajax

随机推荐

  • Java 二进制兼容性问题:sun.font.FontManager 类变成接口

    我正在使用Lobo Java Web 浏览器库 它给了我一个例外 经过一些研究 我确定可能是由于该库是针对旧版本的 Java 进行编译的 代码如下 import java io IOException import org lobobrow
  • 特定时间和日期的 JavaScript 倒计时

    我正在使用 jQuery 插件将倒计时器放入我的网页中 目前控制计时器显示内容的代码是 插件的 JS 可以在这里查看 https github com objectivehtml FlipClock blob master js flipc
  • Flutter:TextEditingController 数组

    设置数组的最佳方法是什么TextEditingController扑扑中 我的意思是我需要获取一个值数组Textfield 1 到 n 值并发送到服务器 谁能帮助如何实现这一目标 I tried for int i 1 i lt 75 i
  • if(CONST==variable) 或 if(variable==CONST) 有什么区别?

    比较运算符的顺序有区别吗 define CONST VALUE 5 int variable if variable CONST VALUE Method 1 OR if CONST VALUE variable Method 2 这仅仅是
  • 抑制标准 ML 中的“val it”输出

    我正在用标准 ML SML NJ 编写一个 脚本 根据我的喜好设置交互式环境 该脚本所做的最后一件事是打印一条消息 表明一切顺利 本质上 最后一行是这样的 print SML is ready n 当我运行脚本时 一切顺利 但 SML 解释
  • 如何使用包含文件(例如 .css)的相对路径

    我有一个header php文件包含一个 css文件链接 当我 包含 时header php到不同文件夹中的另一个 php 文件中 css对此的 hrefheader php对于新的 php 文件来说不正确 我该如何申报href in my
  • 在 ReactJS 中更新数组中的对象的最佳方法是什么?

    如果您有一个数组作为状态的一部分 并且该数组包含对象 那么通过更改其中一个对象来更新状态的简单方法是什么 示例 根据react教程修改 var CommentBox React createClass getInitialState fun
  • var self = this; 是吗?一个糟糕的模式?

    我发现自己需要 var self this 我的 javascript 类 中有很多内容 虽然这种做法很常见 但感觉有点不对劲 我希望在这个问题中找到一种更好的方法来处理这个问题 或者让我相信这没什么问题 这是保持正确绑定的标准方法吗 我是
  • 在java中发送电子邮件时抛出javax.mail.AuthenticationFailedException

    我是java初学者 我想用java发送电子邮件 因为我在Java中使用这段代码 但我的代码抛出了异常 我需要注意为什么 这是异常的堆栈跟踪 javax mail AuthenticationFailedException 534 5 7 1
  • cakephp 一种表单,多个模型,不显示一个模型的验证消息

    我有一个注册表单 我正在用户和身份表中创建一条记录 用户有许多身份 表格看起来像这样 fieldset legend legend fieldset
  • Sql SMO:如何获取数据库物理文件名的路径?

    我正在尝试返回数据库的 mdf ldf 文件的物理文件路径 我尝试使用以下代码 Server srv new Server connection Database database new Database srv dbName strin
  • Chrome 渲染颜色的方式与 Safari 和 Firefox 不同

    由于某种原因 Chrome 将 FF3A00 渲染为 FF0000 我包含了来自的屏幕截图jsfiddle来说明这一点 色度计报告的颜色 以及我看到的颜色 与 CSS 所说的颜色不同 其他颜色也会发生这种情况 例如 FFAF00 根据色度计
  • 使用 Assembly.LoadFrom 和 Assembly.Load 混合加载程序集时的奇怪行为

    使用混合加载程序集时的奇怪行为Assembly LoadFrom and Assembly Load 我在加载程序集时遇到了奇怪的行为Assembly LoadFrom稍后与Assembly Load 我正在使用加载程序集Assembly
  • ASP.NET Web API 返回可查询的 DTO?

    我使用 ASP NET Web API 构建了一个不错的小 API 但我想从我的上下文 实体框架 AsQueryable 返回实体是不正确的 因此我将所有内容映射到 DTO 对象 然而我不太明白 如何保持上下文可查询 但仍然只返回 DTO
  • “计算附加信息”是什么意思?

    Eclipse Helios 定期开始运行显示 计算附加信息 的作业 这段时间 Eclipse 非常迟缓 几乎无法使用 这份工作是做什么的 我可以把它关掉吗 我只是希望 JDT 团队中有人能够意识到并摆脱它 让它运行得更快 或者至少将其更改
  • 允许所有远程连接,MySQL

    我一直在使用 SQL Server 现在在一个项目中使用 MySQL 使用 SQL Server 如果我们的开发人员知道主机 用户名和密码 他们就可以连接到本地计算机上的远程数据库 不过 对于 MySQL 为了让开发人员能够从本地计算机进行
  • 在类构造函数中包含参数是否可以接受?

    我正在编写一个 ruby gem 它对于计算文本中单词的出现次数很有用 我选择在类构造函数中放置 3 个参数 代码可以工作 但我想重构它以使其美观 根据您的经验 作为 API 读取 维护 使用一个带有没有参数的构造函数和大量 setter
  • OpenCV:FFMPEG:编解码器不支持标签 0x34363268/'h264'

    像在 Mac OS 10 13 6 上一样安装 opencv 后 conda install c conda forge ffmpeg conda install c conda forge opencv 并使用fourcc cv2 Vid
  • OCaml 类型推断算法如何工作?

    我目前正在学习 OCaml 我很好奇 OCaml 如何进行类型推断 我知道这是通过一个称为统一的过程完成的 我尝试阅读已发表论文中的算法 但符号让我失望 谁能为我描述一下分步过程 实际上 可以说统一是算法的实现细节 类型系统只是一组规则 这
  • 使用 ng-click 在 angularJs 中添加和删除类

    我正在尝试如何使用 ng Click 添加课程 我已经将我的代码上传到plunker中点击这里 查看角度文档 我无法弄清楚应该完成的确切方法 下面是我的代码片段 有人可以引导我走向正确的方向吗 div class block div 控制器