在获得一次事件后删除ng单击事件

Remove ng-click event after getting one time event

本文关键字：事件 删除 ng 单击 一次      更新时间：2023-09-26

我将ng-click函数与ng-repeat一起使用。但我想为特定的id获得一次事件。之后，如果我们点击该id，则不应该为该id调用函数。

例如，如果我点击id:101，那么应该只为这个id调用一次函数。而函数将适用于其他id。换句话说，函数将为每个id调用一次。

我的HTML代码：

<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>

我的控制器代码：

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

使用id数组并检查：

$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');
    }
};

您可以稍微更改您的结构，因为您有几个问题。

不能禁用第一个锚点。您可以应用禁用的标记，并将锚点设置为禁用的样式，但单击事件仍将触发。

如果你正在执行静态操作，比如不链接到另一个资源，比如一个单独的页面，你真的应该使用一个按钮，然后可以设置样式并禁用它。

第二个问题是ng-disabled表达式的计算不正确。该指令将其表示为truthy（禁用）或falsy（启用）值。

因此，考虑到这一点，我建议：

将HTML更改为使用按钮，然后将用户模型扩展为具有禁用标志。还要将整个用户对象传递到单击中。

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

在单击中，根据需要使用用户对象，并将禁用标志设置为true。

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

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

希望对有所帮助

这里有一个更简单的解决方案：

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>

除了简化代码外，链接被span取代，因此它不再可点击。我相信这将有更好的用户体验。这是plunker

相关文章：