组合作用域后，字段在 Angular 中未正确重复

我只是使用这种方法组合了模型的示波器：如何在 Angular 中组合多个示波器模型？

但是现在，它在fields对象之外创建了一个单独的field对象，这是以前没有做的。

.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);
                    });
                }
            });
        }
    }
});

数据别名记录输出

{
  "formTitle": "",
  "formDesc": "",
  "fields": [],
  "field": {
    "label": "The actual field title",
    "desc": "The actual field description"
  }
}