Field not repeating properly in Angular after combining scopes

问题

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"
  }
}

回答1:

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';
}

来源：https://stackoverflow.com/questions/27490391/field-not-repeating-properly-in-angular-after-combining-scopes