在元素的单击事件上添加类

2024-04-28

我是 Angular Js 的新手。我需要在元素的单击事件上添加一个类。我尝试了以下代码。但它不起作用。

<html>
<head>
    <style>
        .active{color:red;}
    </style>

    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/angular.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MyController">

    <div ng-repeat="data in datas">
        <p ng-click='selectMe()'>{{data.name}}</p>
    </div>

    <script>
    var app = angular.module('MyApp',[]);
    app.controller('MyController',function($scope){
         $scope.datas = [{name:"first"},{name:"second"}];

         $scope.selectMe = function (){
            $(this).addClass('active');
         }
    });

    </script>
</body>
</html>

这段代码有什么问题?是否有必要使用 ng-class ?怎么做?


您可以传递$event来点击

<p ng-click='selectMe($event)'>{{data.name}}</p>

//code:
$scope.selectMe = function (event){
   $(event.target).addClass('active');
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在元素的单击事件上添加类 的相关文章

  • AngularJS:在任何部分页面控制器之前调用特定函数

    我想调用一个特定的函数 GetSession 在我的应用程序加载开始时 这个函数使 http调用并获取会话令牌 GlobalSessionToken从服务器 然后 该会话令牌用于其他控制器逻辑并从服务器获取数据 我已经打电话给这个GetSe
  • 离子动态列表分隔符

    我已经被这个问题困扰了一段时间 所以我希望你能让我朝正确的方向前进 我的角度工厂返回一个看起来像这样的对象 name Fall year 20xx id some id 这是一个学期列表 每个学期都有一个对象 其中包含名称 年份和学期 ID
  • 对一个指令进行单元测试,该指令的模板都是带有脚本标签的文件

    我很难弄清楚如何在我的 Karma 单元测试中包含我的指令模板 全部位于不同脚本标记的一个文件中 我得到的错误 PhantomJS 1 9 Linux ERROR SyntaxError Parse error at var www htm
  • 页面刷新后如何注销用户?

    我正在跟进谷歌的指南 https developers google com identity sign in web sign in sign out a user注销用户 考虑到gapi auth2刷新页面后将是未定义的 我正在做 if
  • AngularJS + Laravel 5 身份验证

    在使用 AngularJS 构建 SPA 时 我想在 AngularJS 网站中实现用户身份验证 但是 我不知道从哪里开始以及最佳实践是什么 基本上我有一个确定可以担任一个或多个角色 我寻找了一些例子 这样我就可以对如何正确处理这个问题有一
  • Angularjs 中字母数字的正则表达式

    我想要 angularJS 中字母数字字符的正则表达式 我尝试了一些正则表达式 例如 d a z 但它们允许我仅输入数字和字母 但我想要一个不允许我输入它们的正则表达式 例子 121232 abchfe abd 42232 5 是一些例子i
  • AngularJS - 转到上一个/下一个模式

    我正在使用 Angular 构建一个应用程序 其中有一个项目列表 使用 ng repeat 通过单击每个项目 我可以打开一个模式以查看更详细的描述 现在 为了切换到另一个模式 我必须关闭前一个模式 转到列表 然后单击打开另一个模式 我想在单
  • 单击菜单外部以关闭菜单时,Bootstrap 导航栏“闪烁”

    我遇到了导航栏问题 当您单击菜单外部以关闭菜单时 导航栏会出现 闪烁 如果在单击菜单外时按住鼠标 则闪烁会持续存在 如下所示 我认为这可能与角度有关 而不是与CSS有关 主要是因为其他人未能在小提琴上复制它 上一个问题在这里 https s
  • triggerHandler 导致错误:[$rootScope:inprog] $apply 已进行中错误 - AngularJS

    我试图在按下某个键时触发按钮的单击 我正在使用triggerHandler函数 但这导致了上述错误 我想我一定创建了某种循环引用 循环 但我看不到在哪里 这是我的 HTML
  • angular.copy() 和 JSON.parse(JSON.stringify()) 之间的区别?

    有人可以解释 angular copy 和 JSON parse JSON stringify 之间的区别吗 有吗 您会推荐使用什么 angular fromJson angular toJson 与 JSON parse JSON str
  • 如何在 Angularjs 中正确将 JSON 响应解析为 ng-repeat

    我希望能够使用ng repeat为了解析我在前端的响应 我在解析具有多个项目与单个项目的响应时遇到问题ng repeat list 我能够解析 但我必须创建 2 个不同的列表ng repeat在前端进行配置并添加一些丑陋的逻辑 以便在数组长
  • Angular 中控制器之间的通信

    我熟悉以下实现控制器之间通信的方法 还有其他人吗 有更好的方法 最佳实践吗 broadcast emit controller Parent function scope scope broadcast SomethingHappened
  • Angular2 RxJS从地图函数调用类函数

    我是 Angular 2 和 Observables 的新手 所以如果我的问题微不足道 我深表歉意 无论如何 我正在尝试使用 RxJS 测试 Angular 2 HTTP 客户端 虽然我让它工作了 但我需要向我当前正在处理的服务添加更多逻辑
  • Angular2、ZoneJS 和外部更改的 DOM

    我需要一些有关 Angular2 RC1 Web 应用程序中外部更改的 DOM 的帮助 场景很简单 我确实有一个带有相应模板的组件 其中包含一个具有如下 ID 的空 div div div typescripted 组件有一个 ngOnIn
  • 如何使用指令定义的“replace”?

    在本文档中 http docs angularjs org guide directive http docs angularjs org guide directive 它说有一个replace指令的配置 template 用 HTML
  • AngularJS 服务在控制器之间传递数据

    当使用 AngularJS 服务尝试在两个控制器之间传递数据时 我的第二个控制器在尝试从服务访问数据时总是收到未定义的消息 我猜这是因为第一个服务执行了 window location href 并且我认为这是清除服务中的数据 有没有办法将
  • 调用一个从 AngularJS 表达式本地计算值的函数是不是很糟糕?

    我读了关于使用范围的一些 AngularJS 陷阱的文章 http thenittygritty co angularjs pitfalls using scopes 并且它指出您不应在表达式中使用函数 并且我知道每次框架认为需要时都可能会
  • 在 Protractor / Webdriver 中等待页面重定向

    我有一个测试 单击按钮并重定向到用户仪表板 当发生这种情况时 Webdriver 返回 javascript error document unloaded while waiting for result 为了解决这个问题 我插入brow
  • 角度引导手风琴数据绑定问题

    我有 2 个相同型号的下拉菜单 一个位于手风琴内部 另一个位于外部 外部下拉菜单在 2 路数据绑定方面工作良好 但手风琴内部的下拉菜单似乎只有 1 路绑定 换句话说 在 UI 中选择并不会设置模型值 我找到了一个建议here https s
  • Grails Asset-pipeline 不加载角度部分模板

    我将 angular ui bootstrap 与 Grails 2 3 x asset pipeline 1 6 1 插件一起使用 其中一个组件 alert js 正在尝试加载 template alert alert html 但这会解

随机推荐

  • 尝试更改冻结标题:有 FB 开发人员吗?

    在过去的几年里 这个问题已经被问过几次了 但正如 Facebook 告诉我的那样 Facebook 工程师积极参与 StackOverflow 所以我希望在这里能得到一些快乐 我们已将视频上传到 YouTube 进行了转发并确保我们对此感到
  • 如何通过特定的行分隔符读取文本文件?

    使用流读取器读取文本文件 using StreamReader sr new StreamReader FileName Encoding Default string line sr ReadLine 我想强制行分隔符应该是 n not
  • WKWebView CALayer 到图像导出空白图像

    我试图截取网页的屏幕截图 但图像始终为空白 白色 我正在使用此代码进行转换CALayer to Data 取自这里 https stackoverflow com a 41387514 4859791 extension CALayer G
  • 如何显示图片目录中的图像?

    我想显示图片库中的图片 我获取图片并绑定数据 StorageFolder picturesFolder KnownFolders PicturesLibrary IReadOnlyList
  • _CrtDumpMemoryLeaks( ) == 1 在第一行代码上?

    我正在开发一个 MFC Visual C 项目 据我了解MSDN http msdn microsoft com en us library d41t22sb 28v VS 100 29 aspx CrtDumpMemoryLeaks 应该
  • buildozer android NDK 未下载 Ubuntu

    我使用的是 Ubuntu 16 04 LTS 操作系统 我已经在 python2 和 python3 中安装了 buildozer android sdk 已安装 但 buildozer 在下载 android NDK 时显示错误 请帮我解
  • C# 中的嵌套正则表达式替换

    我不太擅长正则表达式 但我了解基础知识 我试图弄清楚如何根据匹配中的某个值进行条件替换 例如 假设我有一些嵌套的字符串结构 如下所示 id value id and value are space delimited id will nev
  • 当抛出堆栈溢出异常时在 Visual Studio 2010 中查看 CallStack

    我想在抛出 stackoverflow 异常时查看调用堆栈 即我想查明是什么递归调用导致了堆栈溢出 调用堆栈已清除 我只能看到 外部代码 编辑我遵循了 Chris Schmich 的建议 下面发布 现在我有一个如下所示的调用堆栈 这只是我正
  • GitPython 并向 Git 对象发送命令

    GitPython http gitorious org git python是一种从 python 与 git 交互的方式 我正在尝试访问基本的 git 命令 例如git commit m message 从此模块中 根据this htt
  • Symfony 4 和 Doctrine 2 从集合中删除(第一个)项目后序列化导致转换为 JSON 对象而不是数组

    我在序列化已删除第一个元素的集合时遇到很多麻烦 我有 CompaniesCollection 实体 与 Company 实体有 Many2Many 关系 ORM ManyToMany targetEntity App Entity Comp
  • 在 Xcode 4 中锁定文件

    我有一个简单的问题 在 Xcode 3 中 我可以通过单击每个文件顶部的小锁图标来锁定文件 我在 Xcode 4 中缺少这个功能 我想我只是盲目的 你能帮助我吗 该功能在 Xcode 4 中被 部分 终止 即使您可以从 文件 菜单解锁锁定的
  • WPF调整大小完成

    所以我需要按程序生成网格的背景图像 只需要 0 1 秒 因此 我可以连接到 SizeChanged 事件 但是当您调整图表大小时 它会每秒触发该事件 30 次 因此调整大小事件会明显滞后 有谁知道连接到调整大小事件并测试天气是否已完成调整大
  • (简单)boost thread_group 问题

    我正在尝试编写一个相当简单的线程应用程序 但我对 boost 的线程库很陌生 我正在开发的一个简单的测试程序是 include
  • 从 CIImage 获取 UIImage 无法正常工作

    我在从 CIImage 获取 UIImage 时遇到问题 下面的代码行在 iOS6 上运行良好 输出图像是 CIImage self imageView UIImage imageWithCIImage outputImage or sel
  • 命名 Docker 卷以共享构建而不更新

    我工作的公司的开发人员要求我用 Docker 做一些不同的事情 然后我也被使用了 目标是拥有 2 个具有以下职责的容器 容器A 节点容器将构建前端 React 应用程序并将捆绑包放入名为的目录中app dist 完成后 容器将停止运行 容器
  • 在 Python 中通过 TCP 套接字发送文件

    我已经成功地将文件内容 图像 复制到新文件 然而 当我通过 TCP 套接字尝试同样的事情时 我遇到了问题 服务器循环未退出 客户端循环在到达 EOF 时退出 但服务器无法识别 EOF 这是代码 Server import socket Im
  • 验证来自两个不同 URL 的 Keycloak 令牌

    我有一个Docker compose具有后端和前端组件的基于系统 后端写的是Python Flask并在多个 docker 容器中运行 前端编写为TypeScript with Angular 前端通过Restful API与后端进行通信
  • java SWT透明复合背景

    我有复合对象 Composite composite new Composite shell SWT NONE composite setBounds new Rectangle 10 10 100 100 我如何使这个组合具有透明背景 我
  • 无法启动 Android Studio 模拟器

    我正在使用 Android Studio 这是 Android 的新官方 IDE 我永远无法让模拟器运行 出现一个黑色的模拟器屏幕 其中包含闪烁的 android 一词 并且几分钟内没有任何变化 我已经等了30多分钟了 没有任何变化 我必须
  • 在元素的单击事件上添加类

    我是 Angular Js 的新手 我需要在元素的单击事件上添加一个类 我尝试了以下代码 但它不起作用 div p data na p div