1

シンプルなhtml:

<table class="table table-condensed">
 <tr data-ng-repeat="customer in customers" data-ng-class="customerSelectedClass(customer)">
  <td>
    <a href="" data-ng-click="selectCustomer(customer)">{{customer.Name}}</a>
  </td>
 </tr>
</table>

私のコントローラーでは、顧客を選択し、適切なクラスを返してテーブルの行を強調表示する2つの関数：

$scope.customerSelectedClass = function (customer) {
            if (customer == $scope.selectedCustomer) {
                console.log('returing info for ' + customer.Name);
                return "info";
            }
            return "";
        };

        $scope.selectCustomer = function (customer) {
            console.log('selecting ' + customer.Name);
            $scope.selectedCustomer = customer;
        }

顧客リンクをクリックすると、customerSelectedClass 関数が 2 回実行されることに気付きました。ng-click ディレクティブの selectCustomer 関数は、必要に応じて 1 回実行されます。Angular はページに 1 回だけ含まれます。これはAngularのバグなのか、それとも私が間違っているのだろうか?

4

1 に答える 1

4

舞台裏で、angular は$watchクラス名を解決する関数に を設定しています。angular はダーティ チェックを使用して変更があったかどうかを確認するため、このメソッドは$digestサイクル中に 2 回呼び出されます。これで結構です。

ただし、このコードをコントローラーに追加しないことをお勧めします。これは、多くの css クラスを管理している場合、不要なコードを大量に追加する可能性があるためです。代わりに次のようにしてみてください。

<table class="table table-condensed">
 <tr data-ng-repeat="customer in customers" data-ng-class="{'info': customer == selectedCustomer}">
  <td>
    <a href="" data-ng-click="selectCustomer(customer)">{{customer.Name}}</a>
  </td>
 </tr>
</table>

その場合、コントローラ関数は必要ありませんcustomerSelectedClass。infoの右側:が true に解決される場合にのみ、クラスが追加されます。で正しい顧客を解決するのに問題はありませんng-repeat。

お役に立てれば。

于 2013-11-10T20:33:36.370 に答える