ngRepeat與其他指令結合

我有一個嚴重的問題。我必須必須實現與一些組合數據的表視圖。我必須在表格行中顯示一些數據，以下行必須是關於此行的一些細節。更重要的是，用戶應該能夠隱藏點擊該行的細節。ngRepeat與其他指令結合

例如，模型是名字和姓氏的某個人。他有孩子，他們的名字必須在他名字後面的下一行顯示。根據我的模型，兒童姓名被存儲在他們父親的屬性中，這是一個類似於自身的對象。孩子不能有其他孩子。

問題是我無法在ngRepeat循環的一次運行中處理多個表格行。我也嘗試添加另一個指令，它沒有幫助，因爲ng-repeat的transclude被設置爲'element'。之後，我試圖修改ng-repeat指令，幾乎達到了結果，但我不得不在指令編譯函數中創建元素。這是一個非常糟糕的主意，因爲代碼變得非常髒並且難以支持。

我這是怎麼修改的NG-重複指令：（只顯示部分變更）

if (!last) { 
    linker(childScope, function(clone){ 
     var el = clone; //angular.element(template); 
     cursor.after(el); 
     if (!childScope.item.innerHidden) { 
      for (var i = 0; i < childScope.item.innerItems.length; i++) { 
       var innerItem = childScope.item.innerItems[i]; 
       console.log(innerItem); 
       var elem = angular.element('<tr><td>' + innerItem.value1 + '</td><td>' + 
        innerItem.value2 + '</td></tr>'); 
       el.after(elem); 
       el = elem; 
      } 
     } 
     last = { 
      scope: childScope, 
      element: (cursor = el), 
      index: index 
     }; 
     nextOrder.push(value, last); 
    }); 
}

我能做什麼？我正在考慮一些可能是孩子和父母的HTML標籤，這可能嗎？我可以對其應用ng-repeat並管理其中的表格行。或者還有其他有趣的可能性嗎？

來源

2013-07-28 Aurora

爲什麼不通過該擴展可見孩子在其輸入到輸出不同的元素父母自定義過濾器添加到您的NG-重複表達？ – lossleader

我會將外部ng-repeat放在tbody標籤上。一個表可以包含多個tbody，它可以讓你有多行共享同一個對象。爲了隱藏子行，有多個選項。我在我的例子中選擇了一個簡單的。這可能不是最好的一個，因爲它會用視圖的標誌對模型進行警告，但它會給你一個關於如何做到這一點的好主意。

比方說，這是你的模型：

$scope.family = [ 
    { 
     name : 'Bob', 
     age : 34, 
     children : [ 
     { 
      name: 'Robert', 
      age: 12 
     }, 
     { 
      name: 'Paul', 
      age: 10 
     } 
     ], 
     show:true 
    }, 
     { 
     name : 'Mike', 
     age : 23, 
     childrens : [], 
     show:true 
    } 
    ]

你會發現顯示屬性。它用於視圖行隱藏技巧...正如我所說，你應該找到一個更好的方法來做到這一點。

要顯示的數據，使用該表：

<table> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
    </tr> 
    </thead> 
    <tbody ng-repeat="person in family"> 
     <tr ng-click="showChildren(person)"> 
     <td>{{person.name}}</td> 
     <td>{{person.age}}</td> 
     </tr> 
     <tr class="child" ng-show="person.show" ng-repeat="child in person.children"> 
     <td>{{child.name}}</td> 
     <td>{{child.name}}</td> 
     </tr> 
    </tbody> 
    </table>

您可能會注意到的第一tr和第二TR的NG-秀NG點擊。這就是魔法隱藏嵌套行的地方。只需在控制器中添加此方法即可使用！

$scope.showChildren = function(person){ 
    person.show = !person.show; 
    }

無論如何...檢查這個活塞...這是一個工作的例子。更容易理解！

http://plnkr.co/edit/fO7LWN

來源

2013-07-29 01:26:42 Galdo

ngRepeat與其他指令結合

回答

相關問題