Remove ng-click event after getting one time event

Question

I am using ng-click function with ng-repeat. but I want to get the event one time for particular id. and after that if we click on that id then function should not be called for that id.

For example, if I click on id:101 then the function should be called for this id only once. and function will work for other ids. In other words function will be called once for each ids.

My HTML code:

<body ng-controller="AppController">

<table>
  <tr ng-repeat="user in users" class="table table-striped table-bordered">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td><a href="javascript:void();" ng-class="{true:'shortlisted',false:'shortlist'}[shortlistStatus == {{user.id}}]"  ng-disabled="disable_{{user.id}}" ng-click="shortlist(user.id);" >Shortlist</a></td>              

  </tr>

</table> 

 </body>

My controller code:

var app = angular.module('plunker', []);
app.controller('AppController', ['$scope', function($scope) {

    $scope.users = [{
        firstname: "John",
        lastname: 'Doe',
        id: "101"
    }, {
        firstname: "John",
        lastname: 'Doe2',
        id: "102"
    }, {
        firstname: "John",
        lastname: 'Doe3',
        id: "103"
    }];


    $scope.shortlist = function(val) {
        alert(val);

        $scope.shortlistStatus = val;

        var test = 'disable_' + val;

        $scope.test = true;

    };

}]);

Plunker

Anchor tags cannot be disabled with `ng-disabled` they will apply the `disabled` tag however the click will not be disabled. You should use a button if you wish to use ng-disabled. A button will be best anyway if your not actually linking to another resource. there are hacks out there where you can use `prevent default` but hacks are nasty. — ste2425, Oct 30 '15 at 15:45
Have checked these posts? http://stackoverflow.com/questions/23453833/how-can-i-make-my-angularjs-link-disabled, http://stackoverflow.com/questions/23425254/enable-disable-anchor-tag-using-angularjs — Ganesh Kumar, Oct 30 '15 at 16:03

score 2 · Accepted Answer · answered Oct 30 '15 at 16:01

Use an array of id and check that:

$scope.clickedId = [];
$scope.shortlist = function(val) {
    if($scope.clickedId.indexOf(val) < 0) {
        alert(val);
        $scope.clickedId.push(val);
        $scope.shortlistStatus = val;
        var test = 'disable_' + val;
        $scope.test = true;
    } else {
        alert('just clicked');
    }

};

score 0 · Answer 2 · answered Oct 30 '15 at 16:01

you could change your structure slightly as you have a couple of issues.

first Anchors cannot be disabled. You can apply the disabled tag and style your anchor to look disabled however click events will still fire.

If you are performing static actions, as in not linking to another resource like a separate page you should really use a button which can then be styled and disabled.

The second issue is your ng-disabled expression does not evaluate correctly. The directive exprects it to evaluate to a truthy (to disable) or falsy (to enable) value.

So with that in mind i propose this:

Change your HTML to use a button, then extend your user model to have a disabled flag. Also pass your entire user object into the click.

<button ng-class="{true:'shortlisted',false:'shortlist'}[shortlistStatus == {{user.id}}]"  ng-disabled="user.disable" ng-click="shortlist(user);" >Shortlist</button>

In your click use your user object as you need and set the disabled flag to true.

    $scope.shortlist = function(user){ 
      alert(user.id);
       $scope.shortlistStatus = user.id;
       user.disable = true;
    };

Full plunker: http://plnkr.co/edit/R2Ip8rLkDislYx4Z6nXR?p=preview

hope that helps

Thanks for your response, but I can not use button instead of anchor tag.. that will be a huge change for me all over the site. — sumitjainjr, Oct 30 '15 at 16:15

score 0 · Answer 3 · answered Oct 31 '15 at 13:35

Here is the simpler solution:

app.controller('AppController', ['$scope', function ($scope) {
$scope.users = [
    {firstname: "John", lastname: 'Doe', id: "101", shortlisted: false},
    {firstname: "John", lastname: 'Doe2', id: "102", shortlisted: false},
    {firstname: "John", lastname: 'Doe3', id: "103", shortlisted: false}
];

$scope.shortlist = function (user) {
    user.shortlisted = true;
}; }]);

<body ng-controller="AppController">
<table>
    <tr ng-repeat="user in users" class="table table-striped table-bordered">
        <td>{{user.firstname}}</td>
        <td>{{user.lastname}}</td>
        <td><a href="#" class="shortlist" ng-hide="user.shortlisted" ng-click="shortlist(user);">Shortlist</a>
            <span ng-show="user.shortlisted" class="shortlisted">ShortListed</span></td>
    </tr>
</table>
</body>

In addition to simplifying code, the link is replaced with span, so it is no longer clickable. I believe this will have better user experience. Here is the plunker

Remove ng-click event after getting one time event

3 Answers3