Angularjs 在ng repeat中重复表单名称

我有一个表单

editQuoteCardForm

在一个重复多次的

ng repeat

中。表单绑定到

editQuoteCard

模型。当用户单击“编辑”按钮时，表单将预填充当前模型的正确数据

我遇到的问题是，我无法通过调用

editQuoteCardForm.$valid

验证表单，因为DOM中有多个

editQuoteCardForm

实例。事实上，如果我在调试器会话中调用

$scope.editQuoteCardForm

，它将返回

未定义的

我的问题是，如何在

ng repeat

中正确处理表单名称，从而验证表单

以下是我表格的代码：

<div ng-repeat="c in quoteCards" style="display:none;" id="{{'edit_quote_card_' + c.id + '_form_container'}}">
    <div class="row" id="{{'edit_quote_card_' + c.id + '_form'}}">
        <div class="col-lg-12">
            <div class="row-scrollable" ng-show="view === 'quote-card'">
                <div class="col-lg-12">
                    <form accept-charset="UTF-8" name="editQuoteCardForm" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
                        <input name="utf8" type="hidden" value="✓">
                        <input name="authenticity_token" type="hidden" ng-model="editQuoteCard.token">
                        <input name="id" type="hidden" ng-model="editQuoteCard.id">

                        <div class="form-group">
                            <label>Title</label>
                            <br style="clear:both;" />
                            <input type="text" class="form-control" name="title" ng-model="editQuoteCard.title" required>
                        </div>

                        <div class="form-group">
                            <label>Attribution</label>
                            <br style="clear:both;" />
                            <input type="text" class="form-control" name="attribution" ng-model="editQuoteCard.attribution">
                        </div>

                        <div class="form-group">
                            <label>Quote</label>
                            <br style="clear:both;" />
                            <textarea rows="3" class="form-control" name="quote" ng-model="editQuoteCard.quote" required></textarea>
                        </div>

                        <div class="form-group">
                            <label>Media</label>
                            <br style="clear:both;" />
                            <input type="hidden" class="form-control" name="photo" ng-model="editQuoteCard.image">
                            <input type="hidden" class="form-control" name="video" ng-model="editQuoteCard.video">
                            <div class="profile-builder attachment">
                                <div ng-show="editQuoteCard.video" class="content video-content result iframe">
                                    <div class="caption delete-btn" ng-click="editQuoteCard.video = undefined;">
                                        <i class="fa fa-times"></i>
                                    </div>
                                    <iframe ng-if="editQuoteCard.video.media_type === 'Youtube'" ng-src="{{editQuoteCard.video.media_url + '?showinfo=0&autohide=1' | trustAsResourceUrl}}" frameborder="0" id="ytplayer" type="text/html"></iframe>
                                    <iframe ng-if="editQuoteCard.video.media_type === 'Vimeo'" ng-src="{{editQuoteCard.video.media_url + '?badge=0&byline=0&title=0' | trustAsResourceUrl}}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                                </div>
                                <div ng-show="editQuoteCard.image" class="content result">
                                    <div class="delete-btn" ng-click="editQuoteCard.image = undefined;">
                                        <i class="fa fa-times"></i>
                                    </div>

                                    <div class="image-container" ng-style="{'background-image': 'url(' + editQuoteCard.image.image_url + ')'}"></div>
                                </div>
                            </div>
                        </div>
                        <br style="clear:both;" />

                        <div class="form-group">
                            <input class="btn btn-primary" style="float:right;" name="commit" type="submit" value="Update Card" ng-disabled="editQuoteCardForm.$invalid">
                            <div class="btn btn-default" style="float:right;margin-right:10px;" ng-click="openMediaBrowser({type: c.class, id: c.id, index: $index});" ng-show="!editQuoteCard.image && !editQuoteCard.video">Add Media</div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

标题


归属


引用


媒体




添加媒体

您可以为每个表单动态创建名称

<form accept-charset="UTF-8" name="editQuoteCardForm{{$index}}" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
</form>

因此，您的表单将被命名为

---

editQuoteCardForm0

，

editQuoteCardForm1

，

editQuoteCardForm2

等

请您出示负责创建多个

表单的
ng repeat
代码。刚刚更新了我的post@ACIDSTEALTH，还有什么需要帮忙的吗？谢谢！我把这个标记为正确的，尽管我已经回去调整了我的方法。我将表单重构为指令，以确保每个表单都有自己的作用域，从而从一开始就不需要动态表单名称。