Disable an ng-click on an ng-repeat

Question

I've read through a bunch of questions on SO and for whatever reason the solutions posted are not working. I have a list of items that I'm ng-repeat ing, and I want to disable two items from being clicked.

<tr ng-repeat="itm in jtc.jobTypes" ng-click="jtc.showAdvanced(itm); setSelected(itm.JobTypeId)" ng-disabled="itm.JobTypeId==-1" ng-class="{selected: itm.JobTypeId === idSelected}">

Answer 1

Only form elements (textbox, button, etc.) can have a disabled property set on them.

To disable a click event on a particular item, check your item ID inside the click handler.

showAdvanced(itm) {
  if (itm.JobTypeId != -1) {
    // do something
  }
}

Further, you shouldn't be calling multiple functions in the ng-click handler. Make a separate click handler function and call the other functions from inside it.

<tr ng-repeat="itm in jtc.jobTypes" ng-click="onItemClicked(itm)">

And...

onItemClicked(item) {
  if (itm.JobTypeId != -1) {
    showAdvanced(itm);
    setSelected(itm.JobTypeId);
  }
}

Answer 2

Try ng-class

ng-class="(itm.JobTypeId==-1)?'disableClick':''"

css

.disableClick {
    pointer-events: none;
}