在Angular中使用ng-repeat进行动态模型和脏检查

Dynamic models and dirty checking with ng-repeat in Angular

本文关键字：模型 动态 检查 Angular ng-repeat      更新时间：2023-09-26

我正在做一些我认为相对直接的事情，但是Angular没有为我正确地工作。我很肯定这是可以做到的。我想我只是遗漏了一些东西。

从本质上讲，我已经在Angular中创建了一个表单服务，在那里我可以定义一个对象数组来动态创建表单。一个这样的例子如下: 
email: [
    {
        name: 'email',
        type: text,
        required: true
    }
]

这可以表示某人将在其中输入电子邮件的表单。我想做的是运行ng-repeat，并添加一些Angular脏检查，如下所示:

<form name="form">
    <span ng-repeat="fields in formFields">
        <input name="{{field.name}}
            ng-model="user[field.name]" />

       <div ng-show="form.{{field.name}}.$dirty">Input is dirty</div>
    </span>
</form>

然而，由于某些原因，这不起作用。我已经尝试了几种不同的组合，但没有运气。我正在遵循我在Angular文档中看到的示例:https://docs.angularjs.org/guide/forms

这是一个摆弄当前代码:http://jsfiddle.net/HB7LU/4764/…正如您所看到的，双向绑定在ng-repeat中工作，而不是脏检查。在前面的示例中，脏检查正在工作。

我在这里做错了什么?

你可以添加<span ngForm="myForm">来处理这个

它可以处理多个输入元素，但请参阅末尾的注释。

这是一个更新的小提琴显示这个解决方案:http://jsfiddle.net/HB7LU/4766/

<div ng-controller="MyCtrl">
    <form name="form">  
        <input name='myInput' ng-model='model.myInput'>
        <div ng-show='form.myInput.$dirty'>Dirty</div>
        <!-- 1. Add `ng-form="myForm"` directive. -->
        <span ng-form="myForm"
              ng-repeat='field in email'>
            <input ng-model="field[email.name]" name={{email.name}} />
            {{field[email.name]}}
            <!-- 2. Reference the named parent -> `myForm.$dirty` -->
            <div ng-show="myForm.$dirty">It's dirty!</div>
        </span>
    </form>
</div>

请注意，您最终将从form.myForm获得单个myForm实例-如果您需要从form访问单个myForm实例，您将需要使用自定义指令来处理此问题(请参阅我对您的问题的评论)。

相关文章：