2

ng-classを使用して複数のcssクラスを適用しようとしています。私は次のことをしています。

  <span ng-class="{'label':true, 'label-success':status=='Ok', 'label-warning':status=='Warnings', 'label-important':status=='Critical'}">{{status}}</span>

ここで動作中のプランカーを参照してください。もっと短い方法はありますか？私が試したもう1つの方法は、CSSクラスのリストを返すコントローラー関数を呼び出すことですが、CSSクラス名でコントローラーを汚染したくないのです。

4

2 に答える 2

6

複雑すぎると思われるDOM機能をリファクタリングするための良い方法は、ディレクティブを作成することです。たとえば、文字列に基づいて条件付きでクラスを適用するだけのディレクティブを作成できます。

<span status-class='status'>{{status}}</span>

app.directive('statusClass', function() {
  return function(scope, elem, attrs) {
    scope.watch(attrs.statusClass, function(value) {
      if(value == 'Ok')
        elem.addClass('label-success');
      else
        elem.removeClass('label-success');
      // ... etc ...
    });
  };
});

舞台裏にはもっと多くのコードがありますが、ビューは単純化されています

ng-classクラス名が異なり、このような単一のディレクティブを使用できない場合は、質問のように使用することが、目的の効果を得る最も簡単な方法であることがわかるでしょう。

于 2013-03-09T04:21:52.387 に答える
2

短くするには、ステータス名とクラス名を一致させてから、次のようにします。

<span class="label" ng-class="'label-'+status">{{status}}</span>

しかし...

実生活ではもっと複雑かもしれません。ブートストラップ アラートより多くのステータスがある可能性があり、アプリケーションのステータス ラベルがブートストラップ クラス名と完全に同じではないため、これが最適な場合があります。

<span class="label" ng-class="alert_class(status)">{{status}}</span>

そしてあなたのコントローラーで：

  $scope.alerts = {
    'Warnings': 'label-warning',
    'Ok': 'label-success',
    'Critical': 'lablel-important'
  };

最後に、コード内のステータス、ステータス ラベル、およびブートストラップ クラスがすべて異なる場合は、次のようなより複雑な構造が必要になります。

$scope.statuses =
  warning:
    label: 'Warnings'
    class: 'label-warning'
  ok:
    label: 'It`s OK'
    class: 'label-success'
  critical:
    label: 'Something is going wrong...'
    class: 'label-important'

次のように使用します。

<span class="label" ng-class="statuses[status].class">{{statuses[status].label}}</span>
于 2013-03-09T09:12:12.380 に答える