我有一系列卡片的个人资料。每张卡都有一种类型(例如图库卡,报价卡等),并且该简档可以具有每种类型中的一种或多种。我正在构建一个配置文件编辑器,并希望能够以模态打开编辑表单。每张卡片都有自己独特的输入形式,但每种卡片类型只有一种形式,因为我们无法预先知道配置文件每种类型的卡片数量。
对于每个表单,我都有一些ng-init
指令,用于使用当前模型的属性预填充编辑表单。这很好用,除非我有一张以上类型的卡片,每张卡片的编辑表格都会包含该套装中最后一张卡片的数据。有没有办法在打开表单时触发ng-init
指令再次运行(例如使用ng-click
),以便用户始终可以看到当前模型的属性?
以下是我的一张卡片形式:
<% if c.class.name == 'QuoteCard' %>
<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" ng-init="editQuoteCard.token='<%= form_authenticity_token %>'">
<input name="id" type="hidden" ng-model="editQuoteCard.id" ng-init="editQuoteCard.id='<%= c.id %>'">
<div class="form-group">
<label>Title</label>
<br style="clear:both;" />
<input type="text" class="form-control" name="title" ng-init='editQuoteCard.title = "<%= c.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-init='editQuoteCard.title = "<%= c.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-init='editQuoteCard.title = "<%= c.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">
<%= photo = Photo.find_by(quote_card_id: c.id) %>
<%= video = Video.find_by(quote_card_id: c.id) %>
<div class="profile-builder attachment"
ng-init='<%= "editQuoteCard.image = #{{ image_url: photo.image.url, id: photo.id }.to_json}" unless photo.nil? %>'
ng-init='<%= "editQuoteCard.video = #{{ media_url: video.media_url, media_type: video.media_type, id: video.id }.to_json}" unless video.nil? %>'>
<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: <%= i %>});" ng-show="!editQuoteCard.image && !editQuoteCard.video">Add Media</div>
</div>
</form>
</div>
</div>
<% end %>
在我的控制器中,我有一个edit
函数,用正确的形式打开模态:
$scope.edit = function(options) {
modal.open({
content: $('#edit_card_' + options.index + '_form'),
elem: $('#edit_card_' + options.index + '_form_container')
})
};