1

私は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ますか?

4

1 に答える 1

0

これを見てください

ワーキングデモ

脚本

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>
于 2014-04-11T13:44:09.957 に答える