在获取一次事件之后，移除ng-click事件。

14 浏览
0 Comments

在获取一次事件之后，移除ng-click事件。

我正在使用ng-click函数和ng-repeat。但我希望为特定的id只获取一次事件。之后，如果我们点击该id，该函数就不应该再为该id调用。

例如，如果我点击id：101，那么该函数只应该为这个id调用一次。并且该函数将为其他id工作。换句话说，该函数将为每个id调用一次。

我的HTML代码：




  

    {{user.firstname}}
    {{user.lastname}}
    Shortlist

我的控制器代码：

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

0

3 答案

0 Comments

问题的原因是ng-click事件在点击后仍然会保留，导致用户可以多次点击，而实际上只需要执行一次。

解决方法是将ng-click事件执行后移除。具体做法是在shortlist函数中添加一行代码$scope.shortlist = null;，将ng-click的值设为null，从而移除事件。

以下是整理后的

在上述代码中，存在一个问题：ng-click事件在点击后仍然会保留，导致用户可以多次点击，而实际上只需要执行一次。为了解决这个问题，我们需要移除ng-click事件。

解决方法是在shortlist函数中添加一行代码$scope.shortlist = null;。这样，一旦点击事件执行完毕，ng-click的值就会被设为null，从而移除事件。这样，用户就无法再次点击。

此外，为了提供更好的用户体验，我们还将链接替换为span，这样用户就无法再点击了。这个改动可以简化代码，并且提供更直观的界面反馈。

以上就是解决问题的方法。你可以在下面的链接中查看完整的示例代码：

[plunker链接](http://plnkr.co/edit/ugCcijWUYiX4pPmm9Bzn?p=preview)

0
0 Comments

问题的原因是，anchor标签无法被禁用，即使应用了disabled标签和样式，点击事件仍然会触发。另外，ng-disabled表达式的计算结果不正确，指令期望它计算为真值（禁用）或假值（启用）。

解决方法是将HTML代码中的anchor标签改为button标签，并在用户模型中添加disabled标志。另外，将整个用户对象传递给点击事件处理函数。在点击事件处理函数中，根据需要使用用户对象，并将disabled标志设置为true。

下面是修改后的代码：

点击事件处理函数：

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

完整的示例代码可以在以下链接中找到：

[http://plnkr.co/edit/R2Ip8rLkDislYx4Z6nXR?p=preview](http://plnkr.co/edit/R2Ip8rLkDislYx4Z6nXR?p=preview)

希望这能帮到你。感谢你的回复，但我无法将anchor标签替换为button标签，那将对整个网站造成很大的改变。

0
0 Comments

从上面的内容中，我们可以看到有一个ng-click事件被绑定在$scope.shortlist函数上。当点击某个元素时，会执行这个函数。函数中先判断点击的元素是否已经在$scope.clickedId数组中，如果不在，则弹出一个alert提示点击的元素，并将点击的元素添加到$scope.clickedId数组中。然后将$scope.shortlistStatus的值设置为点击的元素的值，并将$scope.test设置为true。如果点击的元素已经在$scope.clickedId数组中，则弹出一个alert提示已经点击过。

现在的问题是，每次点击元素都会触发ng-click事件，而且点击过的元素也会继续触发事件。所以需要解决的问题是如何在执行一次ng-click事件后，移除这个事件的绑定，使得点击过的元素不再触发事件。

解决方法如下：

在$scope.shortlist函数中，添加一行代码，使用AngularJS提供的$event对象的stopPropagation方法，来停止事件的传播。代码如下：

$scope.shortlist = function(val, $event) {
    // ...
    // 其他代码省略
    // ...
    $event.stopPropagation();
};

在HTML中，将ng-click事件的参数中添加$event，代码如下：

{{val}}

这样，在点击元素时，会将$event对象作为参数传入$scope.shortlist函数中，并在函数内部调用$event.stopPropagation()方法来停止事件的传播。这样，点击过的元素就不会再触发ng-click事件了。

这样，每次点击元素后，ng-click事件只会执行一次，并且点击过的元素不再触发事件。

0