Question

我正在使用Angular;我有一个ng-repeat循环，我想让一些元素可以点击。如下所示：

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

控制器中的某些内容类似于

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

Angular：仅对ng-repeat内的元素子集进行ng-click

1 个答案: