AngularJS：单击一次后要禁用该链接

Question

I have a list and each item of the list is clickable.

I want that each item should be clickable only one time.

Once someone click on it, it will be disable or not clickable for second time.

My code is Like folowing:

<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's answer almost works but since addCtrl creates isolate scope, you would need to define seenIds on the scope whose controller contains addCtrl . Here is a working solution:

The 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>

The 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) {
}

See on JSFiddle .

Answer 2

If you were to attach the click handler in jQuery, then you could use .one() , for example :

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

I'm not sure Angular allows you to do this.

Answer 3

Create a hash in the scope of addCtrl

$scope.seenIds = {}

Your insertRecord(item.id) will check first if the id has been seen. If it has, don't do anything.

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

They can click all they want, but nothing will happen except the first click.