Search code examples
javascriptangularjsangularjs-ng-repeatanchordisabled-input

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

I have an ng-repeat of anchor tags that is displaying 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 of the ng-repeat elements, more specifically, the anchor tag of me/myself.

myself.contactId

and 

member.contactId

will be the same on the anchor tag representing my user. However, it is still not disabling my ability to click on my own group member anchor tag. Am I utilizing ng-disabled correctly? Or alternatively, is there another way of accomplishing this?

Solution

  • You could not disable <a> anchor tag, you should try a simpler way to do by handling logic on html itself using && check like first check member.contactId != myself.contactId and if its true then only fire storeRecentContact(member.fullProfile.xpid) method.

    here you ng-click should look like ng-click="member.contactId != myself.contactId && storeRecentContact(member.fullProfile.xpid)" now you can remove ng-disabled directive which is of no use.

    Markup

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

    Small Demo Plunkr

    Update

    To stop redirecting your link to different page you could use ng-attr directive that will set an href tag value(where you want to redirect your SPA) by evaluation {{}} expression. If you want to redirect to #/contact/1 then your href would be href="#/contact/{{ ::member.fullProfile.xpid }}" otherwise it would be simply href="" as blank. Suppose as you are using a condition that member.contactId shouldn't be equal to member.contactId like member.contactId != myself.contactId then you don't want user to redirect your SPA on contact details page. That thing will handle by {{member.contactId != myself.contactId' ? #/contact/'+ member.fullProfile.xpid: '' }} of ng-attr-href this will change href attribute value on basis of {{}} 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>