ng-classを整理するにはどうすればよいですか？

Question

Angularフォームの特定のフィールドが有効で汚れているかどうかを検出する必要があるというシナリオがあります。

私は現在、完璧に動作するng-classを使用しています。しかし、私はhtmlで本当に乱雑に見える大量の表情で終わります。以下は例です：

data-ng-class="{'component-is-valid' : 
form.firstName.$valid && form.firstName.$dirty && form.lastName.$valid && form.lastName.$dirty && form.emailAddress.$valid &&  form.emailAddress.$dirty && form.mobileNumber.$valid && form.mobileNumber.$dirty}" 

ご覧のとおり、これはかなり長いです。

私はng-classの柔軟性を保持するだけでなく、私のDOMを解放するためにこれを抽出できますか？

Answer 1

をKeegan Gは正しく記載されています。

しかし、あなたのngClassロジックがかなり大きくて判読できない場合があります。

私が採用することの多い別のアプローチは、すべてのロジックをコントローラに移動することです。例えば

テンプレート：

<div ng-class="$ctrl.componentClasses()"></div> 

コントローラー：

controller: function() { 
    var vm = this; 

    vm.isValid = function() { 
    // do all your checking here, ultimately it should return a bool 

    return [Boolean]; 
    } 

    vm.componentClasses = function() { 
    return { 
     'my-class-name': vm.isValid() 
    } 
    } 
} 

Answer 2

フォームオブジェクトまたは入力フィールドを受け入れ、あなたは上記の記述しているブール値を返しますあなたのスコープの機能を行います、あなたは代わりにすべてをチェックする$ctrl.form.$validで1本のヒットで全体フォーム検証を確認することができますng-class="{'component-is-valid': checkValidity(form)}"