问题描述
限时送ChatGPT账号..我只是使用这种方法组合了模型的范围:如何在 Angular 中组合多个范围模型?
但现在它在 fields
对象之外创建了一个单独的 field
对象,这是它以前没有做的.
HTML
<div class="field-actions"><i class="icon-edit"></i><i class="icon-move"></i><i class="icon-remove"></i><h4>{{theForm.field.label}}</h4><em class="field-desc">{{theForm.field.desc}}</em><!-- 类型:文本--><input ng-switch-when="text" type="text" placeholder="" disabled class="span6"><!-- 类型:para--><textarea ng-switch-when="para" type="text" placeholder="" disabled class="span6"></textarea><!-- 类型:掉落--><select ng-switch-when="drop" placeholder="" disabled class="span6"></select><div class="field-options well"><label>字段标题</label><input type="text" placeholder="Field Label" class="span8" ng-model="theForm.field.label"><label>字段说明</label><textarea class="description span8" type="text" placeholder="Field Description" ng-model="theForm.field.desc"></textarea><label class="checkbox"><input type="checkbox" value="" ng-model="theForm.field.req">必填?</label><!-- 类型:掉落--><label ng-switch-when="drop" class="checkbox"><input type="checkbox" value="" ng-model="theForm.field.dropOptionsMul">是否允许多项选择?</label><label ng-switch-when="drop">选项</label><em ng-switch-when="drop">在每一行输入一个新选项.</em><textarea ng-switch-when="drop" class="span6" type="text" placeholder="Options" ng-list=" "ng-trim="false" ng-model="theForm.field.dropOptions"></textarea>
<input class="sortOrder" id="" name="" value="" type="hidden">
JS
angular.module('formApp', []).controller('formController', ['$scope', function($scope) {$scope.theForm = {表格标题:'',formDesc: '',字段:[]};$scope.addField = 函数(ui){var type = ui.draggable.attr("id");控制台日志(类型);$scope.theForm.fields.push({type: type, label:'Added Form Title', desc:'Added Form Desc', req:false});console.log("for-break");};}]).directive('drag', function() {返回 {限制:A",链接:功能(范围,元素,属性){$( elem ).draggable({助手:克隆",activeClass: "ui-state-default",悬停类:ui-state-hover",下降:功能(事件,用户界面){}});}}}).directive('drop', function() {返回 {限制:A",链接:功能(范围,元素,属性){$( elem ).droppable({悬停类:持有人状态突出显示",下降:功能(事件,用户界面){//handleDropEvent(event, ui);//排序();范围.$应用(函数(){angular.element('#theForm').scope().addField(ui);});}});}}});
JSON 输出
<代码>{"formTitle": "","formDesc": "",字段":[],场地": {"label": "实际字段标题","desc": "实际字段描述"}}解决方案
ng-repeat="field in theForm.fields"
field
成为 theForm.fields
中每个对象的快捷方式".
因此在 ng-repeat
中,您只需通过 type
调用它.
就像在说
for (i = 0; i
I just combined my scopes for models using this method: How can I combine multiple scope models in Angular?
but now it's creating a separate field
object outside of the fields
object which it didn't do before.
HTML
<li order="" class="field-dropped text" ng-repeat="field in theForm.fields" ng-switch="theForm.field.type">
<div class="field-actions"><i class="icon-edit"></i> <i class="icon-move"></i> <i class="icon-remove"></i>
</div>
<h4>{{theForm.field.label}}</h4>
<em class="field-desc">{{theForm.field.desc}}</em>
<!-- type: text -->
<input ng-switch-when="text" type="text" placeholder="" disabled class="span6">
<!-- type: para -->
<textarea ng-switch-when="para" type="text" placeholder="" disabled class="span6"></textarea>
<!-- type: drop -->
<select ng-switch-when="drop" placeholder="" disabled class="span6"></select>
<div class="field-options well">
<label>Field Title</label>
<input type="text" placeholder="Field Label" class="span8" ng-model="theForm.field.label">
<label>Field Description</label>
<textarea class="description span8" type="text" placeholder="Field Description" ng-model="theForm.field.desc"></textarea>
<label class="checkbox">
<input type="checkbox" value="" ng-model="theForm.field.req">Required?</label>
<!-- type: drop -->
<label ng-switch-when="drop" class="checkbox">
<input type="checkbox" value="" ng-model="theForm.field.dropOptionsMul">Allow Multiple Choices?</label>
<label ng-switch-when="drop">Options</label>
<em ng-switch-when="drop">Enter a new option on each line.</em>
<textarea ng-switch-when="drop" class="span6" type="text" placeholder="Options" ng-list=" " ng-trim="false" ng-model="theForm.field.dropOptions"></textarea>
</div>
<input class="sortOrder" id="" name="" value="" type="hidden">
</li>
JS
angular.module('formApp', [])
.controller('formController', ['$scope', function($scope) {
$scope.theForm = {
formTitle: '',
formDesc: '',
fields: []
};
$scope.addField = function(ui) {
var type = ui.draggable.attr("id");
console.log(type);
$scope.theForm.fields.push({type: type, label:'Added Form Title', desc:'Added Form Desc', req:false});
console.log("for-break");
};
}])
.directive('drag', function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
$( elem ).draggable({
helper: "clone",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
}
});
}
}
})
.directive('drop', function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
$( elem ).droppable({
hoverClass: "holder-state-highlight",
drop: function(event, ui) {
//handleDropEvent(event, ui);
//sortOrder();
scope.$apply(function(){
angular.element('#theForm').scope().addField(ui);
});
}
});
}
}
});
JSON Output
{
"formTitle": "",
"formDesc": "",
"fields": [],
"field": {
"label": "The actual field title",
"desc": "The actual field description"
}
}
解决方案
ng-repeat="field in theForm.fields"
field
becomes the 'shortcut' for each object in theForm.fields
.
So inside ng-repeat
you call it just by type
.
It's like saying
for (i = 0; i < theForm.fields.length; i++) {
var field = theForm.fields[0];
// from now on you access it by field
field.type = 'My Type';
}
这篇关于组合范围后,字段在 Angular 中没有正确重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论