组合范围后，字段在 Angular 中没有正确重复 [英] Field not repeating properly in Angular after combining scopes

问题描述

我只是使用这种方法组合了模型的范围:如何在 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="&#10;"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="&#10;" 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屋！