Question

我在ng-click使用ng-repeat功能。但是我希望有一次特定身份的活动。然后，如果我们点击该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

Answer 1

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

};

Answer 2

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

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

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

第二个问题是您的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>

在您的点击中，根据需要使用您的用户对象，并将disabled标志设置为true。

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

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

希望有所帮助

Answer 3

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

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

获得一次活动后删除ng-click事件

3 个答案: