0

私は AngularJS を初めて使用し、継承したアプリ (最初はサードパーティによって開発されたもの) のメンテナンス タスクを割り当てられました。

表のヘッダー行の左側には、クリックしたときにセクションを展開するか折りたたむかを示すプラス (+) またはマイナス (-) 記号を示す小さなボタンがあります。これは、次のように ngClass を使用して行います。

ng-class="{false:'icon-plus',true:'icon-minus'}[day.expanded]"

セクションにデータがなく、展開できない場合は、ボタンを削除する必要があります。これにはすでにクラス（.plus-placeholder）があり、ngClassが使用する式をネストして、このようなことを許可できるかどうか疑問に思っていました

ng-class="{false:'plus-placeholder',true:{false:'icon-plus',true:'icon-minus'}[day.expanded]}[day.hasTrips]"

hasTripsこれにより、プロパティを追加しdayてタスクを達成できます。

expandoStateこれが不可能な場合は、'collapsed'、'expanded'、'empty' の文字列を返すようなプロパティを追加する必要があると思います。だから私はこのようにngClassをコーディングすることができます

ng-class="{'collapsed':'icon-plus','expanded':'icon-minus','empty':'plus-placeholder'}[day.expandoState]"

そしておそらく、これはいずれにせよそれを行うためのよりクリーンな方法です。考えや提案はありますか？関連する場合、アプリは AngularJS v1.0.2 を使用しています。

4

1 に答える 1

1

あなたが言及した2つのオプションのいずれかを確実に行うことができます。2 番目のコードは、読み取り可能なコードの点で、最初のコードよりもはるかに優れています。

あなたexpandoStateが言及するプロパティは、おそらくスコープに配置されたプロパティまたはメソッドである必要があります。あなたの属性は次のようになります

ng-class="{'collapsed':'icon-plus','expanded':'icon-minus','empty':'plus-placeholder'}[expandoState()]"

このメソッドをスコープに配置するには、関連するコントローラーを見つける必要があります。これはおそらくday、スコープに割り当てられている場所です。追加するだけ

$scope.expandoState = function() {
    // Return current state name, based on $scope.day
};

または、次のようにコントローラーにメソッドを書くこともできます

$scope.buttonClass = function() {
    // Return button class name, based on $scope.day
};

使用するクラスを返すだけです。これにより、最初のオプションのロジックをより読みやすい方法で記述できます。次に、使用できます

ng-class="buttonClass()"
于 2013-10-15T10:38:37.813 に答える