在angularjs中创建表'下拉'视图

Question

我有一个表格，我使用angularjs渲染 - 只是每行有id的项目列表。 我现在想要的是能够在下拉视图中查看每行的详细信息，可能是带有嵌套表的div。（此详细信息视图将对服务器进行异步调用，以根据行ID提取所需数据）。 我可能可以使用常规引导模式完成此操作，但我想在同一父页面的下拉视图中执行此操作。 所有这些都可以通过jquery实现，但我想使用angularjs来实现它。

Answer 1

以下内容将实现您的目标：

1. 使用ng-click将click事件绑定到表格行
2. 使用$http服务与服务器通信并检索所点击ID的详细信息
3. 使用一些jQuery将包含您的详细信息的行添加到表中。表的DOM操作在jQuery中比Angular容易得多。如果您真的想要使用Angular，那么它就可以了你要在Angular或普通的javascript中重写下面的例子，网上有一些TON的例子告诉你如何做到这一点。

这是一个完整的例子：

<强>控制器：

public class AngularController：Controller {     公共ActionResult索引（）     {         return View（）;     }

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>

<强>输出：