logo标签列表

移除 ng-click 事件后一次性事件已触发

javascriptangularjs
3
我正在使用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

翻译为：

{{链接1：Plunker}}

锚标签不能使用 ng-disabled 禁用，它们会应用 disabled 标签，但是点击不会被禁用。如果您希望使用 ng-disabled，则应该使用按钮。如果您实际上没有链接到另一个资源，那么按钮将是最好的选择。虽然有一些 hack 可以使用 prevent default，但是 hack 是不好的做法。 - ste2425
你看过这些帖子吗？https://dev59.com/wH_aa4cB1Zd3GeqP11jo，https://dev59.com/F2Ag5IYBdhLWcg3wlLyi - Ganesh Kumar
3个回答
2
使用 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');
    }

};
0

你可以稍微调整一下你的结构，因为你有几个问题。

首先，锚点无法被禁用。你可以应用禁用标签并样式化你的锚点以看起来是禁用的，但是点击事件仍然会触发。

如果你正在执行静态操作，即不链接到另一个资源（如单独的页面），你应该真正使用一个按钮，然后可以对其进行样式化和禁用。

第二个问题是你的ng-disabled表达式没有正确地评估。指令期望它评估为真值（禁用）或假值（启用）。

所以考虑到这一点，我建议这样做：

将你的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;
    };

完整的 Plunker：http://plnkr.co/edit/R2Ip8rLkDislYx4Z6nXR?p=preview

希望这有所帮助。

谢谢您的回复，但我不能使用按钮代替锚标签...这将对整个网站造成巨大的改变。 - sumitjainjr
0

这里是更简单的解决方案：

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。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接