javascript - AngularJS：想要在单击一次时禁用链接

Question

我有一个列表，列表中的每个项目都是可点击的。

我希望每个项目只能点击一次。

一旦有人点击它，它将被禁用或第二次不可点击。

我的代码如下：

<li data-ng-repeat="item in items">
  <a id="{{item.id}}" data-ng-click="insertRecord(item.id)" data-ng-controller="addCtrl">
  {{item.name}}
  </a>
</li>

Answer 1

flim 的答案几乎可以工作，但是由于addCtrl创建了隔离范围，因此您需要seenIds在其控制器包含的范围上定义addCtrl. 这是一个有效的解决方案：

的HTML：

<div ng-app ng-controller="MainCtrl">
  <ul>
    <li data-ng-repeat="item in items">
      <a id="{{item.id}}" data-ng-controller="addCtrl"
          data-ng-click="item.clicked || insertRecord(item.id); item.clicked = true">
      {{item.name}}
      </a>
    </li>
  </ul>
</div>

JS：

function MainCtrl($scope) {
    $scope.items = [
        {id: 1, name: 'foo'},
        {id: 2, name: 'bar'}
        ];

    $scope.insertRecord = function(itemId) {
        alert(itemId + ' clicked (inserting...)');
    };
}

function addCtrl($scope) {
}

请参阅 JSFiddle。

Answer 2

如果您要在 jQuery 中附加点击处理程序，那么您可以使用.one()，例如：

$("#whatever").one(insertRecord);//no need to pass a an id as it can be derived within the function

我不确定 Angular 是否允许您这样做。

Answer 3

在 addCtrl 范围内创建一个哈希

$scope.seenIds = {}

您的 insertRecord(item.id) 将首先检查 id 是否已被看到。如果有，不要做任何事情。

$scope.insertRecord = function (id) {
  if (typeof $scope.seenIds[id] === "undefined") {
    $scope.seenIds[id] = 1;
    // do your thing
  }
}

他们可以随意点击，但除了第一次点击之外什么都不会发生。