javascript - Angular : ng-click only on subset of elements inside a ng-repeat

Question

我正在使用 Angular；我有一个 ng-repeat 循环，我想让一些元素可点击。 类似于以下内容:

<div ng-repeat="item in itemList">
    <span ng-class="{ 'interactive' : item.clickable }"
          ng-click="doSomething(item)"> .... </span>
</div>

Controller 中的 doSomething 类似于

$scope.doSomething = function(item) {
    if (!item.clickable) return;
    /* do stuff */
};

这可行，但我担心如果大多数元素不可点击，设置大量无用的处理程序可能会减慢页面速度。是这样吗？如果是这样，有没有办法仅在需要时设置 ng-click 属性，即仅针对那些 item.clickable === true 的元素？

Answer 1

看看这个

<强> Working Demo

脚本

angular.module('main', []);
// Main Controller
function Controller($scope) {
    $scope.itemList = [{
        clickable: true,
        id:1,
        name: "ABC-Name"
    }, {
        clickable: false,
        id:2,
        name: "XYZ-Name"
    }, {
        clickable: true,
        id:3,
        name: "LMN-Name"
    }];

    $scope.doSomething = function(item) {
     console.log(item);
    }
}

html

<div class="container" ng-app="main" ng-controller="Controller">
<div ng-repeat="item in itemList">
    <span ng-class="{ 'interactive' : item.clickable }"
          ng-click="!item.clickable||doSomething(item)">{{item.name}} 
    </span>
</div>
</div>