Angular: how to disable an anchor tag from an array (ng-repeat) of anchor tags
I have an anchor tag ng-repeat that displays a list of clickable group memebers:
<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">
As you can see at the end of the anchor tag, I am trying to disable 1 from the ng-repeat elements, or rather the anchor tag for me / me.
myself.contactId
and
member.contactId
will be the same in the anchor tag representing my user. However, it still doesn't disable my ability to click my own group member anchor tag. Am I using ng-disabled correctly? Or alternatively, is there some other way to accomplish this?
source to share
You cannot disable the anchor tag <a>
, you should try the simpler way to do it by processing the logic directly in the html using &&
check as first check member.contactId != myself.contactId
and if true then only fire storeRecentContact(member.fullProfile.xpid)
.
here you ng-click should look like ng-click="member.contactId != myself.contactId && storeRecentContact(member.fullProfile.xpid)"
You can now remove the directive ng-disabled
which is useless.
Markup
<a href="#/contact/{{ ::member.fullProfile.xpid }}"
ng-click="member.contactId != myself.contactId && storeRecentContact(member.fullProfile.xpid)"
...other attributes..
.....
></a>
Refresh
To stop redirecting your link to another page, you can use a directive ng-attr
that will set the tag value href
(where you want your SPA to redirect) using an expression {{}}
. If you want to redirect to #/contact/1
, then yours href
will be href="#/contact/{{ ::member.fullProfile.xpid }}"
, otherwise it will just be href=""
empty. Suppose when using a condition that member.contactId
shouldn't be member.contactId
like member.contactId != myself.contactId
, then you don't want the user to redirect your SPA page to contact information. This thing will be processed {{member.contactId != myself.contactId' ? #/contact/'+ member.fullProfile.xpid: '' }}
from ng-attr-href
, this will change the attribute value href
based on the expression{{}}
<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>
source to share
ng-disabled
creates a disabled attribute that is only used for inputs.
The anchor tag is not an input, so it cannot be disabled. What you want to do is change the way you deal with this problem. You can hide it (the element a
), you may need the directive to remove href
or replace it with "#" or something depending on your state.
You can also do:
ng-href="{{getRef(member, mySelf)}}"
and calculate that from your controller. If your condition is false and it should display fine, just return a normal link. Otherwise, you can return #
:
$scope.getRef = function(member, myself) {
if (member.contactId == myself.contactId) {
return "#";
}
else {
return "#/contact/" + member.fullProfile.xpid;
}
}
source to share