如何禁用单击ng-repeat行?

时间:2016-01-28 18:26:33

标签: javascript angularjs

我的头衔说明了一切。如何禁用ng-repeat行的单击?或者甚至是可能的。

以下是我创建的示例代码:

<div ng-controller="MyCtrl" class="grid">
  <div class="header">
    <div class="cell">Id</div>
    <div class="cell">Name</div>
  </div>
  <div class="gridBody">
    <div ng-class-even="'even'"
         ng-class-odd="'odd'"
         ng-class="{current: row.current == true}"
         ng-click="clicked(row)"
         ng-repeat="row in topics" class="row"
         ng-disabled="disabled == true">
      <div class="cell">{{row.id}}</div>
      <div class="cell">{{row.name}}</div>
      <div class="cell">{{row.current}}</div>
    </div>
  </div>
</div>

我还创建了这个jsfiddle来展示我正在努力的事情。

编辑:

我已经编辑了我的jsfiddle以显示我想要实现的更多内容。希望现在更清楚。

http://jsfiddle.net/2jxea6qw/8/

1 个答案:

答案 0 :(得分:1)

您可以使用自定义指令和捕获的事件来执行此操作。

这个概念是您通过以下方式订阅ClickDisablerDirective链接阶段的$element

$element.addEventListener("click", function(e) {
   e.stopPropagation()
   e.preventDefault()
}, true)

注意&#39; true&#39; param是addEventListener方法的最后一个:它允许在任何其他较低级别(冒泡)处理程序之前通知处理程序。

这是指令的长度:

myApp.directive('disableClick', [function() {
 return {
    restrict:'A',
    link: function(scope, element) {
      element[0].addEventListener("click", function(e) {
        e.stopPropagation()
        e.preventDefault()
      }, true)
    }
 }
}])

我更新了你的小提琴,以显示如何: http://jsfiddle.net/2jxea6qw/6/