angularjsのテーブル 'プルダウン'を作成

Question

私はanglejsを使ってレンダリングしたテーブルを持っています - 各行にidを持つアイテムのリストです。 私が今思うのは、プルダウン・ビューの各行の詳細をネストした表を持つdivにすることです（この詳細ビューは、行IDに基づいて必要なデータをプルする非同期呼び出しをサーバーに送信します） 。 通常のブートストラップモーダルを使ってこれを行うことはできますが、同じ親ページのプルダウンビューでやりたいと思います。 これはjqueryでも可能ですが、anglejsを使って実装したいと思います。

Answer 1

以下は、あなたが探しているものを達成します：

1. を使用ng-clickテーブル行にクリックイベントをバインドする
2. サーバーに話をし、クリックされたの詳細を取得するために$httpサービスを使用しますID
3. 詳細情報を含む行をテーブルに追加するには、jQueryを少し使用します。テーブルのDOM操作は、jQueryの方がAngularよりはるかに簡単です。実際にAngularを使用する場合は、下の例は角度または通常のjavascriptの例ですウェブ上でこれを行う方法を示しています。

ここでは完全な例です：

コントローラー：

パブリッククラスAngularController：コントローラ { 公共のActionResultインデックス（）{ リターンビュー（）; }

public ActionResult SomeActionMethod(int id) 
{ 
    //Write the code to get the specific details for the passed through id 
    var user = new {Name="User Name",Surname = "User surname" }; 
    return Json(user,JsonRequestBehavior.AllowGet); 
} 

}

ビュー：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 

<style type="text/css"> 
    .close { 
     color: red; 
    } 
</style> 

<script type="text/javascript"> 

    $(function() { 

     $(document).on("click", "span.close", function() { 

      $(this).parent().parent().empty(); 

     }); 
    }); 

    var app = angular.module('app', []); 
    app.controller('controller', function ($scope, $http) { 

     var current = ""; 

     $scope.ids = [1, 2, 3, 4, 5]; 

     $scope.RowClick = function (i) { 

      $http.get("/Angular/SomeActionMethod/" + i).success(function (data, status, headers, config) { 

       $('#users > tbody > tr').each(function() { 
        var tr = $(this); 
        var isPopup = $(tr).hasClass("popup"); 

        if (!isPopup) { 

         var children = $(tr).children(); 
         var id = children[0].innerText; 


         if (id == i && current != id) { 
          alert($(tr).html()); 
          $("<tr class='popup'><td>" + data.Name + " " + data.Surname + "&nbsp;<span class='close'>X</span></td></tr>").insertAfter(tr); 
          current = id; 
         } 
        } 
       }); 
      }); 
     }; 
    }); 
</script> 

<div ng-app="app" ng-controller="controller"> 
    <table id="users"> 
     <thead> 
      <tr> 
       <th> 
        ID 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="i in ids"> 
       <td ng-click="RowClick(i)">{{i}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

出力：