AngularJS：要禁用链接时，点击一次 [英] AngularJS : Want to disable the link when it clicked once

问题描述

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

我想，每个项目应该是点击一次。

一旦有人点击它，它会禁用或无法点击的第二次了。

我的code是像如下因素：

 ＆LT;李数据-NG-重复= GT中的项项＆;
  ＆LT;一个ID ={{item.id}}数据-NG-点击=insertRecord（item.id）数据-NG-控制器=addCtrl＆GT;
  {{项目名}}
  ＆所述; / A＆GT;
＆LT; /李＆GT;
 

解决方案

弗利姆的答案的几乎的作品，但因为 addCtrl 创建隔离范围，你会需要定义 seenIds 上的控制器包含 addCtrl 的范围。这里是一个工作的解决方案：

中的HTML：

 ＆LT; D​​IV NG-NG应用程序控制器=MainCtrl＆GT;
  ＆LT; UL＆GT;
    ＆LT;李数据-NG-重复=中的项项＆GT;
      ＆LT;一个ID ={{item.id}}数据-NG-控制器=addCtrl
          数据-NG-点击=item.clicked || insertRecord（item.id）; item.clicked =真正的＆GT;
      {{项目名}}
      ＆所述; / A＆GT;
    ＆LT; /李＆GT;
  ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

在JS：

 函数MainCtrl（$范围）{
    $ scope.items = [
        {ID：1，名称：'富'}，
        {ID：2，名称：'棒'}
        ];    $ scope.insertRecord =功能（的itemId）{
        警报（+的itemId'点击（插入...）'）;
    };
}功能addCtrl（$范围）{
}
 

查看的jsfiddle 。

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>

解决方案

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.

这篇关于AngularJS：要禁用链接时，点击一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！