Satırları, açısal

Question

ng-yinelemeyle işlenen bir tabloya itme İstemcinin satırı tıklattığı sırada bir satır içi satır içi satır içine itmek istiyorum. En fazla 30 satırda olmasını beklediğim, ancak her satırın tek bir getiri almak için mantıksız olabilecek verileri olduğu durumlarda, veriler önceden getirilmemelidir.

Şu ana kadarki yaklaşımım, koleksiyonumu yinelemek ve bir tablo oluşturmak için ng-yinelemeyi kullanmaktır. İstemci sıraya bastığında, istemci, satırdaki ayrıntıların basılan satırın altında ekstra satır olarak gösterilmesini bekler.

<tr ng-repeat="court in courts">    
    <td>{{court.name}}</td> 
    <td>{{court.number}}</td> 
    <td>{{court.nrOfPlayers}}</td> 
    <td> 
    <a href ng:click="toggle(court.number)">Details</a> <!-- click toggles extra row with data loaded async --> 
    </td> 
</tr> 
<!-- extra row here --> 

Ben Bir Hacky şekilde bir ng-gösterisi ile masanın altından ayrıntıları göstermek için başardı, ama benim istediğim değil.

Bunu angular.js ile nasıl başarabilirsiniz? Bunu yapmanın açısal yolu nedir? İşte

aptal bir squash kortu örnek http://jsfiddle.net/HByEv/

Answer 1

Fiddle Muhtemel bir çözüm http://jsfiddle.net/HByEv/2/ olabileceğini düşünüyorum.

Ayrıca ekstra <tr ng-show="..."></tr> kurtulmak istiyorsanız, keman yorumladı "Oyuncu yok" mesaj için bir alternatif de vardır.

Düzenleme: Eğer şimdi bu sorunu çözmek için ng-repeat-start ve ng-repeat-end kullanabilirsiniz 1.2 ve üzeri angularjs içinde, yorumlardaki belirttiği gibi

. Tabii http://jsfiddle.net/3yamebfw/

Answer 2

Eh bir keman olduğunu. Aslında, tasarımınızdaki ana sorun, aynı tabloda binlerce satır göstermek istediğinizdir. Çalışır, ancak bazı tarayıcılarda (IE) oluşturulması zor olabilir. Her satır için, birkaç bağlama ve her bağlama ekleme izleyicileriniz olacaktır. Her zaman sayfadaki ciltleme miktarını en aza indirmeye çalışmalısınız. Dizininizde bir sayfalama sistemi kullanmanızı öneririm. Pagination on a list using ng-repeat

Satırları önceden belirtmeksizin istediğiniz şeyi yapmak istiyorsanız, önlenebilirken açılı olarak iyi bir uygulama olmayan dom'u düzenlemeniz gerekecektir. Benim durumumda, verileri başka bir sayfaya, statik bir bölgeye yerleştiririm. Böyle bir şey yaptığımda, sayfamda bir twitter bootstrap modal ekledim ve kullanıcı "daha fazla bilgi" yi tıkladığında, modal seçilen nesnenin bilgisi ile açıldı.

Answer 3

Bir örnek

var app = angular.module('test-app', []); 

app.controller('MyController', function($scope, $rootScope, $timeout){ 

    $scope.copy = { 
     p1: ['c1 p1', 'c1 p2'], 
     p3: ['c3 p1', 'c3 p2', 'c3 p3', 'c3 p4', 'c3 p5'] 
    } 

    $scope.courts = [ 
     { 
      "number": 1, 
      "name": "the best court", 
      "nrOfPlayers": 2 
     }, { 
      "number": 2, 
      "name": "the bad court", 
      "nrOfPlayers": 0 
     }, { 
      "number": 3, 
      "name": "the other court", 
      "nrOfPlayers": 5 
     } 
    ]; 

    $scope.loadPlayers = function(court){ 
     //Implement your logic here 
     //Probably using ajax 
     $timeout(function(){ 
      $scope.players = $scope.copy['p' + court.number] || []; 
     }, Math.random() * 2000); 
    } 

    $scope.shouDetails = function(court){ 
     if(court.nrOfPlayers) { 
      delete $scope.players; 
      $scope.loadPlayers(court); 
     } else { 
      $scope.players = []; 
     } 
    } 

}) 

Demo: