Search code examples
angularjshtmlangularjs-ng-click

Disable ng-click

I'm trying to disable an ng-click directive. I have this script I call in a kendo grid 

<script type="text/x-kendo-template" id="PnIssueCell">
    <span style="white-space: normal" ng-click="vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE || vm.HistoryPopup(vm.Drawing, true)">
        {{ dataItem.ID_PN_ISSUE }}
    </span>
</script>

I want that if the condition vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE is true the action has to be enabled.

But something is not working correctly, in fact the row is always clickable.

Any suggestion?

thanks a lot

Solution

  • Just a small correction in your code, Here I'm evaluating your expression first, if the xpression is true. it executes your function otherwise it doesn't.

    <script type="text/x-kendo-template" id="PnIssueCell">
    <span style="white-space: normal" ng-click="(vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE)?vm.HistoryPopup(vm.Drawing, true):null ">
        {{ dataItem.ID_PN_ISSUE }}
    </span>
</script>

    Hope this helps :)

    More specific solution for your problem:

    As we discussed in comments, You want to remove the pointer icon(hand icon) on that element, then you can try with button element instead of span.

    <script type="text/x-kendo-template" id="PnIssueCell">
    <button type="button" style="white-space: normal" ng-click="vm.HistoryPopup(vm.Drawing, true)" ng-disabled="!(vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE)">
        {{ dataItem.ID_PN_ISSUE }}
    </button>
</script>

    Now you don't need to worry about disabling ng-click because, here when expression is false, we are disabling the button, which means we are not allowing any click actions and at the same time, browser automatically changes pointer icon to arrow, as it's a disabled button.