[英]Dynamic models and dirty checking with ng-repeat in Angular
I am doing something that I think is relatively straight forward, but Angular is not working out correctly for me. 我正在做一些我认为相对简单的事情,但是Angular对我来说并不正确。 I am pretty sure this can be done I think I am just missing something here. 我很确定这可以做到,我想我在这里错过了一些东西。
Essentially I have made a form service in Angular where I can define an array of objects for making forms on the fly. 基本上我已经在Angular中创建了一个表单服务,我可以在其中定义一个对象数组,以便即时制作表单。 An example of that would as follows: 一个例子如下:
email: [
{
name: 'email',
type: text,
required: true
}
]
This could represent a form that someone would enter their email in. What I would like to do is run an ng-repeat
over this and add in some Angular dirty checking like so: 这可能代表某人将其输入电子邮件的表单。我想要做的是对此进行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>
However this is not working for some reason. 但是由于某些原因这不起作用。 I have tried a few different combinations to make this work but no luck. 我尝试了一些不同的组合来完成这项工作,但没有运气。 I am following the examples I am seeing on the Angular docs here: https://docs.angularjs.org/guide/forms 我正在关注我在Angular文档中看到的示例: https : //docs.angularjs.org/guide/forms
Here is a fiddle with the current code: http://jsfiddle.net/HB7LU/4764/ ... As you can see the two way binding is working in the ng-repeat
but not the dirty checking. 这是当前代码的小提琴: http : //jsfiddle.net/HB7LU/4764/ ...正如您所看到的那样,双向绑定在ng-repeat
工作,但不是脏检查。 The dirty checking is working in the example before. 脏检查在之前的示例中正在工作。
What am I doing wrong here? 我在这做错了什么?
You can add <span ngForm="myForm">
to handle this. 您可以添加<span ngForm="myForm">
来处理此问题。
It will work with multiple input elements, but see the note at the end. 它将与多个输入元素一起使用,但请参见最后的注释。
Here is an updated fiddle showing this solution: http://jsfiddle.net/HB7LU/4766/ 这是一个更新的小提示,显示了这个解决方案: 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>
Note that you will end up with a single myForm
instance from form.myForm
- if you need to access individual myForm
instances from form
you will need to use a custom directive to handle this (see my comment on your question). 请注意,您最终将使用form.myForm
的单个myForm
实例 - 如果您需要从form
访问单个myForm
实例,则需要使用自定义指令来处理此问题(请参阅我对您的问题的评论)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.