Создание таблицы 'Pull Down' Views в angularjs

Question

Создание таблицы 'Pull Down' Views в angularjs

0

У меня есть таблица, которую я отобразил с помощью angularjs. Просто список элементов с идентификатором в каждой строке. Теперь я хочу видеть детали каждой строки в раскрывающемся списке, возможно, div с вложенной таблицей. (Этот подробный вид сделает асинхронный вызов на сервер, чтобы вытащить требуемые данные на основе идентификатора строки). Я, вероятно, могу это сделать, используя обычный bootstrap modal, но я хотел бы сделать это в раскрывающемся представлении на той же родительской странице. Все это возможно с помощью jquery, но я хотел бы реализовать его с помощью angularjs.

lacoder 21 май 2016, в 16:18

Источник

Теги:

jquery

angularjs

1 ответ

Ещё вопросы

Denys Wessels · Answer 1 · 2016-05-21T13-00-00.000Z

Следующее выполнит то, что вы ищете:

Используйте ng-click для привязки события click к строке таблицы
Используйте службу $http чтобы поговорить с сервером и получить информацию о клике ID
Используйте немного jQuery, чтобы добавить строку, содержащую вашу подробную информацию, в таблицу. Манипуляция DOM для таблиц намного проще в jQuery, чем в Angular. Если вы действительно хотите использовать Angular для этого, то вам придется переписать пример ниже в Угловой или обычный javascript, есть TON примеров в Интернете, показывающих вам, как это сделать.

Вот полный пример:

контроллер:

public class AngularController: Controller {public ActionResult Index() {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>

Выход: