ngClass OR表達式

Question

我有一個具有ng-class屬性的元素，如下所示：

<label class="item item-input item-floating-label"
              ng-class="{'has-errors':{{loginForm.$submitted && loginForm['AccountLoginForm[username]'].$invalid}} || {{loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid && success.data.login=='err'}},
                         'no-errors':{{loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid}} || {{loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid && success.data.login=='ok'}}">
</label>

但是類沒有應用。 我做錯了什么，寫這樣一個表達式的最佳方法是什么？

Answer 1

您可以在ng-class中編寫JavaScript表達式。 您不需要更多的括號{{}} ：

<label class="item item-input item-floating-label"
              ng-class="{'has-errors':(loginForm.$submitted && loginForm['AccountLoginForm[username]'].$invalid) || (loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid && success.data.login=='err'),
                         'no-errors':(loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid) || (loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid && success.data.login=='ok')">
</label>

Answer 2

刪除curly braces {{}} ，您發布的代碼將curly braces {{}} 。 ng-class內允許使用邏輯運算符。 但是更好的方法是創建一個函數，並在要測試的條件下使該函數在數字上返回true或false，然后從ng-class中調用該函數。

<label ng-class="{'classOne':check(), 'classTwo': checkAgain()}"></label>

Answer 3

如您在文檔 ng-class中已經看到的那樣：

<ANY ng-class="expression">

您不必在其中使用'{{expression}}'語法。 嘗試：

<label class="item item-input item-floating-label"
       ng-class="{'has-errors': (loginForm.$submitted && loginForm['AccountLoginForm[username]'].$invalid) || (loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid && success.data.login=='err'),
                  'no-errors': (loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid) || (loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid && success.data.login=='ok')">
</label>

但這確實很難閱讀，所以也許更可取的方法是在$ scope內部創建函數：

$scope.hasErrors = function(loginForm, success) {
    return (loginForm.$submitted && loginForm['AccountLoginForm[username]'].$invalid) || (loginForm.$submitted && loginForm['AccountLoginForm[username]'].$valid && success.data.login=='err')
}

然后重構html代碼：

 <label class="item item-input item-floating-label"
       ng-class="{'has-errors': hasErrors(loginForm, success), 'no-errors': !hasErrors(loginForm, success)}">
</label>

請注意，loginForm和成功應該存在於當前的$ scope中。 希望能幫助到你。