Question

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

cordova run browser --disable-web-security

但课程并不适用。我做错了什么，写这样的表达式的最佳方法是什么？

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 {{}}后，您发布的代码即可生效。 ng-class中允许使用逻辑运算符。但更好的方法是创建一个函数，并使该函数在您要测试的条件上返回true或false，然后从ng-class调用该函数。

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

Answer 3

正如您在documentation中看到的那样，ng-class已经预期表达式：

<ANY ng-class="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中。希望它有所帮助。

ngClass OR表达式

3 个答案: