Question

我有一个指令，我在其中创建了许多ng-form，并根据$index（来自ng-repeat）命名每个表单。我的问题是，当表单无效但我无法找到如何正确引用表单时，我想显示一个错误容器（包含错误消息）。

这是我的代码：

<ng-form name="innerForm{{$index}}">

    <label ... ><input name="input" ... />

        <div class="error-container" ng-show="'innerForm'+$index.input.$invalid">
               // show the error message
        </div>

</ng-form>

我希望将'innerForm'+$index.input.$invalid评估为innerForm5.input.$invalid。

我做了很多尝试，但我无法让它发挥作用。引用动态命名表单的正确方法是什么？

Answer 1

请参见此处：http://jsbin.com/jocane/4/edit

 <div ng-controller="firstCtrl">
  <div ng-repeat="object in allMyObjects">
    <ng-form name="innerForm{{$index}}">
  <input type="text"  ng-model="object.name" required name="userName">

      <div ng-show="{{'innerForm'+$index}}.userName.$invalid">
               error
        </div>
      </form>

    </div>

Answer 2

首先，ng-form创建了一个孤立的范围。因此，如果您提供ng-form静态名称，那就没问题。无需追加$ index或任何东西。

ng-show="innerForm.input.$invalid"

使用元素

查找表单控制器的代码段

  var elmParent = $(domEle).parents('form, ng-form, [ng-form]');
    var formCtrl = null;
    var elemCtrl = null;
    if (elmParent.length) {
    var elm = angular.element(domEle);
        formCtrl = elm.scope().$parent[elmParent.attr('name') || elmParent.attr('ng-form')];
    }

希望这会有所帮助

AngularJS - 在表达式中使用$ index进行动态命名

2 个答案: