本文介绍了现场不正确角结合重复后的作用域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我只是结合我的作用域的使用这种方法的模型：<一href=\"http://stackoverflow.com/questions/27488920/how-can-i-combine-multiple-scope-models-in-angular?noredirect=1#comment43411560_27488920\">How我可以在角组合多个模型的范围？
但现在它创建字段对象，它以前没有做以外的单独的字段对象。
HTML
＆LT;李令=级=现场下跌文本NG重复=字段theForm.fieldsNG-开关=theForm.field.type＆GT ;
＆LT; DIV CLASS =现场行动＆GT;＆LT; I类=图标编辑＆GT;＆LT; / I＆GT; ＆LT; I类=图标 - 移动＆GT;＆LT; I＆GT /; ＆LT; I类=图标删除＆GT;＆LT; / I＆GT;
＆LT; / DIV＆GT;
＆LT; H4＆GT; {{theForm.field.label}}＆LT; / H4＆GT;
＆LT; EM类=场递减＆GT; {{theForm.field.desc}}＆LT; / EM＆GT; ！＆LT; - 类型：文本 - ＆GT;
＆LT;输入NG-开关时=TEXT类型=文本占位符=禁用类=span6＆GT; ！＆LT; - 类型：第 - ＆GT;
＆LT; textarea的NG-开关时=对位类型=文本占位符=禁用类=span6＆GT;＆LT; / textarea的＆GT; ！＆LT; - 类型：滴 - ＆GT;
＆LT;选择NG-开关时=滴占位符=禁用类=span6＆GT;＆LT; /选择＆GT; ＆LT; DIV CLASS =字段的选项以及＆GT;
＆LT;标签＆gt;字段标题＆LT; /标签＆gt;
＆LT;输入类型=文本占位符=字段标签级=span8NG模型=theForm.field.label＆GT;
＆LT;标签＆gt;字段说明＆LT; /标签＆gt;
＆LT; TextArea类=说明span8类型=文本占位符=字段说明NG模型=theForm.field.desc＆GT;＆LT; / textarea的＆GT;
＆LT;标签类=复选框＆GT;
＆LT;输入类型=复选框VALUE =NG模型=theForm.field.req＆GT;＆要求LT;？/标签＆gt; ！＆LT; - 类型：滴 - ＆GT;
＆LT;标签NG-开关时=滴级=复选框＆GT;
＆LT;输入类型=复选框VALUE =NG模型=theForm.field.dropOptionsMul＆GT;允许多选＆LT;？/标签＆gt;
＆LT;标签NG-开关时=滴＆gt;选项＆LT; /标签＆gt;
＆LT; EM NG-开关时=滴＆gt;在各行中输入一个新的选择与LT; / EM＆GT;
＆LT; textarea的NG-开关时=滴级=span6类型=文本占位符=选项NG-列表=＆放大器;＃10; NG-修剪=false的NG-模式=theForm.field.dropOptions＆GT;＆LT; / textarea的＆GT; ＆LT; / DIV＆GT;
＆LT;输入类=中将sortOrderID =NAME =值=类型=隐藏＆GT;
＆LT; /李＆GT;
JS
angular.module（'formApp'，[]）
.controller（'的FormController'，['$范围'，函数（$范围）{
$ scope.theForm = {
formTitle：''，
formDesc：''，
字段：[]
}; $ scope.addField =功能（UI）{
VAR类型= ui.draggable.attr（ID）;
的console.log（类型）;
$ scope.theForm.fields.push（{类型：类型，标签：添加表格名称'，说明：添加表说明，REQ：假}）;
的console.log（为断）;
};
}]）
.directive（'拖'，函数（）{
返回{
限制：A，
链接：功能（范围，ELEM，ATTRS）{
$（ELEM）.draggable（{
助手：克隆，
activeClass：UI状态默认
hoverClass：UI状态悬停
下降：函数（事件，UI）{
}
}）;
}
}
}）
.directive（'降'，函数（）{
返回{
限制：A，
链接：功能（范围，ELEM，ATTRS）{
$（ELEM）.droppable（{
hoverClass：持有人，国家突出，
下降：函数（事件，UI）{
// handleDropEvent（事件，UI）;
//排序（）;
范围。$应用（函数（）{
。angular.element（'＃theForm'）的范围（）激活addField（UI）;
}）;
}
}）;
}
}
}）;
JSON输出
{
formTitle：，
formDesc：，
田：[]，
场：{
标签：实际的字段title
说明：实际的字段说明
}
}
解决方案
NG-重复=字段theForm.fields
字段成为每个对象快捷方式在 theForm.fields 。
所以，在 NG-重复你怎么称呼它只是键入。
这就像说
为（i = 0; I＆LT; theForm.fields.length;我++）{
变种字段= theForm.fields [0]; //从现在开始，您可以通过实地访问
field.type ='我的类型;
}
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';
}
这篇关于现场不正确角结合重复后的作用域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！