Question

我正在尝试使用$ invalid在div中的输入未填写时将一个类添加到div。但是我无法弄清楚语法。

<div ng-app ng-controller="miniC">

    <form name="persondetails" novalidate>

    <div ng-repeat="account in myAccounts" ng-class="{'has-error': account.amount.$invalid}" >

        <input name="{{account.name}}" ng-model="account.amount" required="required"/>

    </div>

    </form>

</div>


function Account(nameArg, amountArg){
   this.name = nameArg;
   this.amount = amountArg;
}

周围的div需要有class =＆＃34; has-error＆＃34;当内部项目没有填写时。我在单个绑定元素上做了类似的事情，似乎无法让这个工作....

Answer 1

$invalid标志未附加到ngModel，而是附加到表单控制器（ngFormController）。

在您的示例中，您并未证明您甚至使用ngForm，如果您想要角度来验证表单，则应该这样做。

接下来，您尝试动态设置输入的name属性。 ngForm不喜欢它，因为在评估表达式之前将初始化ngFormControll。解决方法是将每个ng-repeat迭代包装在新的ngForm中（ngForm可以嵌套并且它将起作用）并使用一些静态字符串值命名输入（例如name="amount"）。

所以，你希望你的观点写成：

<div 
  ng-repeat="account in myAccounts" 
  ng-class="{'has-error': form.amount.$invalid}" 
  ng-form="form"
>
  <input name="amount" ng-model="account.amount" required="required"/>
</div>

如果ng-repeat中的项目无效，如何向div添加类？

1 个答案: