Inner ng-repeat跳過我的數組的第一項，並將它們放入最後一個html元素

Question

我有一個JSON數組，我試圖使用angular的ng-repeat將其轉換爲HTML並顯示爲HTML。

我的JSON的形式爲：

data:{ 
thing_one:[{ 
     id:1, 
     fields:[{ .... }] 
    }, 
    { 
     id:2, 
     fields:[{ .... }] 
    }], 
separate_thing:[{ 
     id:1, 
     fields:[{ .... }] 
    }, 
    { 
     id:2, 
     fields:[{ .... }] 
    }] 
} 

在我的控制器，該頁面：

我：

MockFields.get(function(data){ 
    $scope.thing_one = data.thing_one; 
    $scope.separate_thing = data.separate_thing; 
} 

而且我的HTML的精簡版是：

<div class="details"> 
    <div class="my_header"> 
     <h2>Thing 1</h2> 
    </div> 
    <div class="thing_one"> 
     <dynamic-form fields="thing_1[0].fields"><dynamic-form> 
    </div> 
</div> 
<div class="details"> 
    <div class="my_header"> 
     <h2>Separate Thing</h2> 
    </div> 
    <div class="separate_thing" ng-repeat="thing in separate_thing> 
     <dynamic-form fields="thing.fields"><dynamic-form> 
    </div> 
</div> 

Wh 是一個自定義指令，我重複了我的字段，並使用ng-switch on=...來選擇字段類型。它看起來有點像這樣（再次減少）

<div ng-repeat='field in fields track by field.order'> 
    <label>{{field.display}}</label> 
    <span ng-switch on='field.fieldtype'> 
     <span ng-switch-when="text"> 
      <input type="text"/> 
     </span> 
     <span ng-switch-when="...."> 
      <input type="...."/> 
     </span> 
     . 
     . 
     . 
     . 
    </span> 
</div> 

但是什麼我看到的是，所有來自thing S IN separate_thing我的領域是在最後<dynamic-form>，第一個是空的。

這是我所看到的，當我檢查DOM的那個元素/段：

<div class="details"> 
    <div class="my_header"> 
     <h2>Separate Thing</h2> 
    </div> 
    <div class="separate_thing" ng-repeat="thing in separate_thing></div> 
    <div class="separate_thing" ng-repeat="thing in separate_thing> 
     <div> 
      <label>Foo from separate thing 1</label> 
      <input type="text"> 
      ..... 
     </div> 
     <div> 
      <label>Foo from separate thing 2</label> 
      <input type="text"> 
      ..... 
     </div> 
    </div> 
</div> 

這是從角的優化？或者我做錯了什麼？我有點失落，因爲我沒有看到我的代碼有任何錯誤。

爲什麼它將我所有的子對象（字段）都推送到最後一個元素？

Answer 1

這可能是一個錯誤。

角指令編譯失敗時，他們有多種元素，而含有元素，這我以前設立有（通過NG-重複）

而不是我的指令裏面，我現在已經包裹在div與ng-repeat內一個分區。

所以我現在有：

<div> 
    <div ng-repeat='field in fields track by field.order'> 
     <label>{{field.display}}</label> 
     <span ng-switch on='field.fieldtype'> 
      <span ng-switch-when="text"> 
       <input type="text"/> 
      </span> 
      <span ng-switch-when="...."> 
       <input type="...."/> 
      </span> 
      . 
      . 
      . 
      . 
     </span> 
    </div> 
</div> 

而這一切都似乎是幸福的。