Angular：如何从锚标签数组（ng-repeat）中禁用锚标签

Question

我有一个 ng-repeat of anchor tags，它显示了一个可点击的组成员列表：

<a href="#/contact/{{ ::member.fullProfile.xpid }}" ng-click="storeRecentContact(member.fullProfile.xpid)" class=" GroupRow ListRow ListRow-Contact vmsection ng-class:{'last': $last}" ng-class-odd="'ListRowOdd'" ng-class="{'ListRowLast':$last}" data-ng-repeat="member in group.members | filter: searchFilter() | orderBy: [selectedSort.type, 'fullProfile.displayName'] track by member.xpid" droppable="Call" ng-disabled="member.contactId == myself.contactId">

正如您在锚标记末尾看到的那样，我试图禁用 1 个 ng-repeat 元素，更具体地说，me/myself 的锚标记。

myself.contactId

和

member.contactId

在代表我的用户的锚标记上将相同。但是，它仍然没有禁用我点击我自己的组成员锚标记的能力。我是否正确使用了 ng-disabled？或者，还有其他方法可以实现吗？

Answer 1

您无法禁用 <a> 锚标记，您应该尝试一种更简单的方法来处理 html 本身的逻辑，使用 && 检查就像第一次检查 member.contactId != myself.contactId如果它是真的那么只触发 storeRecentContact(member.fullProfile.xpid) 方法。

这里你的 ng-click 应该看起来像 ng-click="member.contactId != myself.contactId && storeRecentContact(member.fullProfile.xpid)" 现在你可以删除没有用的 ng-disabled 指令。

标记

<a href="#/contact/{{ ::member.fullProfile.xpid }}" 
ng-click="member.contactId != myself.contactId && storeRecentContact(member.fullProfile.xpid)" 
...other attributes..
.....
></a>

Small Demo Plunkr

更新

要停止将您的 link 重定向到不同的页面，您可以使用 ng-attr 指令，该指令将通过评估 {{}}表达式。如果你想重定向到 #/contact/1 那么你的 href 将是 href="#/contact/{{ ::member.fullProfile.xpid }}" 否则它将只是 href="" 作为空白。假设您使用的条件是 member.contactId 不应等于 member.contactId，例如 member.contactId != myself.contactId，那么您不希望用户在联系详情页面上重定向您的 SPA。那件事将由 ng-attr-href 的 {{member.contactId != myself.contactId' ? #/contact/'+ member.fullProfile.xpid: '' }} 处理，这将根据 {{}} 表达式

更改 href 属性值

<a ng-attr-href="{{member.contactId != myself.contactId' ? #/contact/'+ member.fullProfile.xpid: '' }}" 
   ng-click="member.contactId != myself.contactId &&  storeRecentContact(member.fullProfile.xpid)" 
   ...other attributes..
   .....
></a>

Answer 2

ng-disabled 创建仅用于输入的禁用属性。

锚标签不是输入，因此无法禁用。你想要做的是改变你解决这个问题的方式。您可能想要隐藏它（a 元素），您可能想要一个指令来删除 href 或将其替换为“#”或基于您的条件的其他内容。

您还可以这样做：

ng-href="{{getRef(member, mySelf)}}" 并通过您的控制器进行计算。如果您的条件为假并且应该正常显示，则只需 return 正常 link。否则，您可以 return #:

$scope.getRef = function(member, myself) {
    if (member.contactId == myself.contactId) { 
        return "#";
    }
    else {
        return "#/contact/" + member.fullProfile.xpid;
    }
}

Angular：如何从锚标签数组（ng-repeat）中禁用锚标签

Angular: How to disable an anchor tag out of an array (ng-repeat) of anchor tags

javascript

angularjs

angularjs-ng-repeat

anchor

disabled-input