10

クライアントが行をクリックしたときに、テーブルにインラインで追加の行をプッシュしたいと思います。データはプリフェッチしないでください。最大で30行あると予想されますが、各行には1回の取得でフェッチするのが不合理なデータが関連付けられています。

これまでの私のアプローチは、ng-repeatを使用してコレクションを反復処理し、テーブルをレンダリングすることです。クライアントが行を押すと、クライアントは、押された行の下に追加の行として行の詳細がインラインで表示されることを期待します。

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

私はなんとかハッキーな方法でng-showを使ってテーブルの下に詳細を表示することができましたが、それは私が望んでいることではありません。

これをangular.jsでどのように達成しますか？これを行うための角度のある方法は何ですか？

これは愚かなスカッシュコートの例のフィドルですhttp://jsfiddle.net/HByEv/

4

3 に答える 3

7

考えられる解決策はhttp://jsfiddle.net/HByEv/2/だと思います。

余分なものも削除したい場合は、フィドルにコメントされている「プレーヤーなし」メッセージの代替手段もあります<tr ng-show="..."></tr>。

編集：

コメントで指摘されているように、AngularJS 1.2以降では、この問題を使用ng-repeat-startしng-repeat-endて解決できるようになりました。

Jossef Harushがフィドルを提供しました：http：//jsfiddle.net/3yamebfw/

于 2013-04-02T12:20:45.350 に答える
1

1つのサンプル

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 = [];
        }
    }

})

デモ：フィドル

于 2013-03-21T12:04:58.150 に答える
0

上手。実際、デザインの主な問題は、同じテーブルに何千もの行を表示したいということです。動作しますが、一部のブラウザ（IE）ではレンダリングが難しい場合があります。行ごとに、いくつかのバインディングがあり、各バインディングはウォッチャーを追加します。ページ内のバインディングの量を最小限に抑えるように常に努める必要があります。アレイでページ付けシステムを使用することをお勧めします。ng-repeatを使用したリストのページ付け

行を事前にレンダリングせずに本当にやりたいことをしたい場合は、domを編集する必要があります。これは、回避可能な場合、Angularでは適切な方法ではありません。私の場合、データをページの別の場所、静的ゾーンに配置します。このようなことをしたとき、自分のページにTwitterブートストラップモーダルを追加し、ユーザーが[詳細]をクリックすると、選択したオブジェクトの情報でモーダルが開きました。

于 2013-03-21T11:51:35.953 に答える