javascript - Angular：ng-click 仅在 ng-repeat 内的元素子集上

Question

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

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

控制器中的 doSomething 类似于

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

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

Answer 1

看看这个

工作演示

脚本

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>