如何更改 ng-repeat 中单个元素的 ng-click 行为?

2024-04-23

我正在重构一个用角度编写的表格。目前 ng-repeat 用于创建多个表行,其中任何行在单击时都会重定向到给定的 ui-sref:

        <tbody>
            <tr ng-repeat="user in group | orderBy:sorter:reverse" class="tablebox-content" ui-sref="admin.candidates.detail({_id: user._id})">
                <td class="name">{{user.name}}</td>
                <td>{{user.attending ? 'Yes' : 'No'}}</td>
                <td class="interestDeclared">{{user.interestDeclared}}</td>
                <td class="interestThreeOrGreater">{{user.interestThreeOrGreater}}</td>
                <td class="github"><a ng-href="{{user.github}}"a>{{user.github}}</a></td>
                <td class="email"><a ng-href="mailto:{{user.email}}">{{user.email}}</a></td>
                <td class="location">{{user.city}}</td>
                <td class="stage">{{user.searchStage === 'Out' ? 'Opted Out' : user.searchStage}}</td>
            </tr>
        </tbody>

我需要替换第二个 td,当前用复选框显示“是”或“否”,问题是单击时需要切换该复选框,而不是像其他 td 那样重定向到 ui-sref 。

我有一个可行的解决方案,它将 ui-sref 硬编码到除复选框之外的每个中:

        <tbody>
            <tr ng-repeat="user in group | orderBy:sorter:reverse" class="tablebox-content">
                <td ui-sref="admin.candidates.detail({_id: user._id})" class="name">{{user.name}}</td>
                <td><input type="checkbox" ng-model="user.attending"></td>
                <td ui-sref="admin.candidates.detail({_id: user._id})" class="interestDeclared">{{user.interestDeclared}}</td>
                <td ui-sref="admin.candidates.detail({_id: user._id})" class="interestThreeOrGreater">{{user.interestThreeOrGreater}}</td>
                <td ui-sref="admin.candidates.detail({_id: user._id})" class="github"><a ng-href="{{user.github}}"a>{{user.github}}</a></td>
                <td ui-sref="admin.candidates.detail({_id: user._id})" class="email"><a ng-href="mailto:{{user.email}}">{{user.email}}</a></td>
                <td ui-sref="admin.candidates.detail({_id: user._id})" class="location">{{user.city}}</td>
                <td ui-sref="admin.candidates.detail({_id: user._id})" class="stage">{{user.searchStage === 'Out' ? 'Opted Out' : user.searchStage}}</td>
            </tr>
        </tbody>

是否有另一种更优雅和/或 Angular 的方式来实现这个解决方案?


你可以简单地这样做:

    <tbody>
        <tr ng-repeat="user in group | orderBy:sorter:reverse" class="tablebox-content" ui-sref="admin.candidates.detail({_id: user._id})">
            <td class="name">{{user.name}}</td>
            <td ng-click="$event.stopPropagation()"><input type="checkbox" ng-model="user.attending"></td>
            <td class="interestDeclared">{{user.interestDeclared}}</td>
            <td class="interestThreeOrGreater">{{user.interestThreeOrGreater}}</td>
            <td class="github"><a ng-href="{{user.github}}"a>{{user.github}}</a></td>
            <td class="email"><a ng-href="mailto:{{user.email}}">{{user.email}}</a></td>
            <td class="location">{{user.city}}</td>
            <td class="stage">{{user.searchStage === 'Out' ? 'Opted Out' : user.searchStage}}</td>
        </tr>
    </tbody>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何更改 ng-repeat 中单个元素的 ng-click 行为? 的相关文章

随机推荐

  • 如何让ChildWindow阻塞

    ChildWindow是一个模态窗口 但它不会阻塞 有什么办法让它阻塞吗 我基本上想要一个 ShowDialog 方法 该方法将调用 ChildWindow Show 但直到用户关闭 ChildWindow 后才会返回 我尝试使用 Moni
  • 在c# Visual Studio中编译协议缓冲区3时间戳类型?

    Visual Studio 2015 C NuGet Packages Google Protobuf v3 0 0 Google Protobuf Tools v3 0 0 消息类型Quake syntax proto3 import g
  • 休眠批量插入-刷新如何工作?

    我需要使用 hibernate 在数据库中插入大量数据 我正在查看 hibernate 的批量插入 我使用的类似于手册上的示例 Session session sessionFactory openSession Transaction t
  • Kivy 弹出窗口在单独的线程中运行

    我正在 Kivy 中填充一个树视图 这需要一些时间 具体取决于它的大小 在树很大并且需要一段时间的情况下 我想在填充时显示一个弹出窗口 以便用户知道程序尚未冻结 并在填充树的逻辑完成时关闭此弹出窗口 这是我通过对该主题的一些研究得出的结论
  • 将坐标列表转换为元组列表

    我正在尝试将坐标列表转换为元组列表 from a list 56 78 72 67 55 66 to list of tuples 56 78 72 67 55 66 我尝试执行 for in 循环将 a list 中的每个元素转换为元组
  • 与枚举和可选元组关联值进行 Swift 模式匹配

    我目前正在使用 Alamofire 并使用枚举来描述我按照自述文件中的建议使用的 API 端点表示如下 public enum API case GetStops stopCode String case GetPhysicalStops
  • 2个JS函数同名冲突

    Short 在同一页面使用 2 个库 jQuery UI 和 Twitter Bootstrap jQuery UI 对我来说非常重要 因为几乎所有的 UI 东西都是基于它构建的 Twitter Bootstrap 仅适用于带下拉菜单的拆分
  • 如何通过拖动扩展窗口框架来使 WPF 窗口可移动?

    在 Windows 资源管理器和 Internet Explorer 等应用程序中 人们可以抓住标题栏下方的扩展框架区域并拖动窗口 对于 WinForms 应用程序 窗体和控件尽可能接近本机 Win32 API 一个人会简单地覆盖WndPr
  • 总和投影和结果约束

    我在数据库中有 100 个实体 我想获取前 20 个实体的某些属性的总和 Criteria cr getSession createCriteria Entity class cr setFirstResult 0 cr setMaxRes
  • ggplot 中的躲避/替换/排斥轴刻度标签?

    如果没有大量工作 我想要的可能是不可能的 但也许有人有解决方案 我有一个如下图 当然这是一个过于简单的示例 其中我的刻度标签彼此非常接近 dd lt data frame x 1 4 y c 10 10 5 10 6 10 7 z LETT
  • python 如何在嵌套列表中搜索项目

    假设我有这个清单 li 0 20 ar 20 40 asdasd 50 199 bar 24 69 sarkozy 现在 忘掉数字吧 它们让我能够识别字符串的位置 所以基本上 鉴于我手头有字符串 ar 我如何提取包含 ar 的所有列表 ne
  • 将 MATLAB 单元格类型转换为 C++

    我正在使用 C 转换 MATLAB 程序犰狳 http arma sourceforge net docs html syntax对于矩阵代数 我被困住了cell http blogs mathworks com loren 2006 06
  • wxGrid 在右侧显示大的空白边框

    默认情况下 wxGrid 在最后一列之后的右侧显示一个小的 10 像素 空白边框 调用 SetMargins 对其没有任何影响 这很烦人 但我可以忍受 但是 如果我将行标签宽度设置为零 则空白边框会变得更大 如果我只有一列 效果会很糟糕 看
  • 送达收据请求不适用于 XMPP Android (aSmack)

    我正在使用 OpenFire 和 aSmack 我似乎无法让 送货收据 正常工作 创建连接时我执行以下操作 create connection connection login username password DeliveryRecei
  • c++ 打开文件的问题

    必须是一个简单的答案 但我不知所措 这是返回错误的代码 我尝试过带或不带起始斜杠 我不知道完整路径 我希望它是相对于exe的 这就是相对路径 我试图逃避斜线 我的问题是当文件存在时我收到 打开文件时出错 为什么它失败了 ifstream m
  • 如何编写恒定时间函数将最高有效位复制到所有位

    我想用 C 语言编写一个函数 它采用以下的 MSBuint8 t 如果已设置 则返回0xFF如果不0x00 简而言之 它返回一个整数 其中所有位都设置为与 MSB 相同的值 但我想以完全恒定的时间方式来完成它 没有分支 没有数组偏移 只是数
  • jq - 过滤器数组不包含

    我正在使用应用程序 jq 从命令行过滤 json 文件 https stedolan github io jq https stedolan github io jq 这是一个代表问题的糟糕例子 如何过滤该集合以包含所有非红色或非圆形的水果
  • 如何循环遍历文件来获取数据?

    我正在尝试进行基本登录并注册 C 控制台应用程序 但是 我需要循环遍历我的文件以查看用户输入的用户名和密码在登录时是否匹配 如果用户输入用户名和密码 我希望我的代码遍历我的文件以检查它是否是现有的用户名和密码 这是我的代码 Serializ
  • Pandas:将列转换为列表

    我有一个数据框 date member id val 2016 06 01 2377264 14 2016 06 01 289719 6 2016 06 02 289719 12 2016 06 02 2377264 1 2016 06 0
  • 如何更改 ng-repeat 中单个元素的 ng-click 行为?

    我正在重构一个用角度编写的表格 目前 ng repeat 用于创建多个表行 其中任何行在单击时都会重定向到给定的 ui sref tbody tr class tablebox content td class name user name