如何将表单提交给同一页面上的ng-repeat列表项?

[英]How do I have a form submit values to an ng-repeat list item that's on the same page?


I asked this as part of another question yesterday, but I think it is best to break this into its own question.

我昨天问这个问题是另一个问题的一部分,但我认为最好将其分解为自己的问题。

I have a registration form which asks the user for name, address, email, etc. In return, smartystreets API returns suggested addresses correcting a possibly mistyped address. What I have (all on one page) is 1) the registration form and 2) a hidden list-item which I want to populate with the returned addresses (via ng-repeat), which will eventually be unhidden as a popup via Jquery UI.

我有一个注册表格,要求用户提供姓名,地址,电子邮件等。作为回报,smartystreets API返回建议的地址,以纠正可能错误输入的地址。我拥有的(全部在一页上)是1)注册表单和2)隐藏的列表项目,我想用返回的地址填充(通过ng-repeat),最终将通过Jquery UI作为弹出窗口取消隐藏。

So, the main issue is how to have the list-item populated via ng-repeat since the registration page is loaded before any data can populate the list item.

因此,主要问题是如何通过ng-repeat填充列表项,因为在任何数据填充列表项之前加载了注册页面。

I have used ng-repeat to populate li's when the data existed already, but I'm confused about what to do in this situation when the data will be passed post-page load.

当数据已经存在时,我已经使用ng-repeat来填充li,但是我很困惑在这种情况下如何在页面后加载数据时做什么。

1 个解决方案

#1


2  

Just use your array in ng-repeat like you would do it with any other. I prefer to define it in the controller before just that I know that there is something but angular can also handle that for you.

只需在ng-repeat中使用您的数组,就像使用其他任何数据一样。之前我更喜欢在控制器中定义它,我知道有一些东西但是角度也可以为你处理。

<li ng-repeat="address in addresses">

As aet allready mentioned in the comments, angular watches for changes in your ng-repeat item so it gets updated whenever you change it. For example when you run an ajax request:

正如已经在评论中提到的那样,有角度观察你的ng-repeat项目的变化,以便每当你改变它时它都会得到更新。例如,当您运行ajax请求时:

$http({method: 'GET', url: '/api/smartystreets/whatever'}).success(function(addresses) {
    $scope.addresses = addresses;
});

It doesn't actually matter if the data is allready there, the async action is started on page load or later on with ng-change or anything else.

实际上,如果数据已经存在,异步操作在页面加载时启动,或者稍后使用ng-change或其他任何内容,则实际上并不重要。

This is one of the strengts of angular, the two way databinding. The only point where you need to do some more work is when you use any async event which is not "covered" by angular and therefore requires you to run the digest cycle yourself using $apply.

这是角度的强度之一,双向数据绑定。您需要做更多工作的唯一一点是当您使用任何不被“覆盖”角度的异步事件时,因此需要您使用$ apply自行运行摘要周期。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.silva-art.net/blog/2014/04/20/60667db221b0d42cbc4ca01b22a71d1a.html



 
© 2014-2018 ITdaan.com 粤ICP备14056181号