Javascript 获取一次性事件后删除ng click事件_Javascript_Angularjs

Javascript 获取一次性事件后删除ng click事件

javascript angularjs

Javascript 获取一次性事件后删除ng click事件,javascript,angularjs,Javascript,Angularjs,我正在使用带有ng repeat的ng click功能。但是我想为特定的id获取一次事件。然后，如果我们单击该id，则不应该为该id调用函数例如，如果我单击id:101，那么该函数应该只为该id调用一次。该函数将适用于其他ID。换句话说，函数将为每个ID调用一次我的HTML代码： <body ng-controller="AppController"> <table> <tr ng-repeat="user in users" class="table t

我正在使用带有

ng repeat

的

ng click

功能。但是我想为特定的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>

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

无法禁用第一个锚点。您可以应用禁用的标记，并将锚点的样式设置为看起来禁用，但是单击事件仍将触发

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

第二个问题是

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>

全扣：

希望这有助于使用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');
    }

};

$scope.clickedId=[]；
$scope.shortlist=函数（val）{
如果（$scope.clickedId.indexOf（val）<0）{
警报（val）；
$scope.clickedId.push（val）；
$scope.shortlistStatus=val；
var测试='禁用\'+val；
$scope.test=true；
}否则{
警报（“刚刚点击”）；
}
};

以下是更简单的解决方案：


{{user.firstname}
{{user.lastname}
入围名单

除了简化代码外，该链接还替换为span，因此不再可单击。我相信这将有更好的用户体验。以下是

ng disabled

无法禁用的锚定标记，它们将应用

disabled

标记，但不会禁用单击。如果希望使用禁用ng，则应使用按钮。如果您没有实际链接到其他资源，那么按钮将是最好的选择。有一些黑客可以使用

阻止默认值

，但是黑客很讨厌。你看过这些帖子了吗，谢谢你的回复，但我不能用按钮代替锚定标签。。这将是一个巨大的变化，我在整个网站。

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

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

};

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>