使用AngularJs和MVC在Accordion中分组数据和显示

时间:2014-09-10 19:32:08

标签: javascript jquery asp.net-mvc angularjs

我是MVC以及AngularJs的新手,并且已经为此工作了好几天。虽然我觉得我越来越近......但仍然没有雪茄。

问题:我有一份按报告类型(名称)分组的报告列表。我正在尝试使用手风琴来显示和隐藏每组中的报告列表。

我的controller.js看起来像这样(我知道这是错的):

window.app.controller('relatedReportsController', ['$scope', '$timeout', 'relatedReportsService',
function ($scope, $timeout, relatedReportService) {
    initialize();
    function initialize()
    {
        $scope.relatedReports = [];
        $scope.rollupVisible = false;
    }
    function sortOn(collection, name)
    {
        collection.sort(
            function (a, b) {
                if (a[name] <= b[name]) {
                    return (-1);
                }
                return (1);
            });
    }
    $scope.groupBy = function (attribute) {
        $scope.Groups = [];
        sortOn($scope.relatedReports, attribute);
        for (var i=0; i< $scope.relatedReports.length; i++)
        {
            var report = $scope.relatedReports[i];
        }
    }
    $scope.toggleRollup = function($event)
    {
        if (angular.element($event.targe).hasClass('glyph')) return;
        relatedReportService.$promise.then(function (data) {
            $scope.relatedReports = data;
        })

    }
    }]);

我的页面如下:

                <li class="fruitRollup header row" ng-controller="relatedReportsController">
                <div class="suitcaseheader">
                    <span class="col-xs-10 zero firstlabel">{{group.Name}}</span>
                    <span class="col-xs-3 zero datepad">Date</span>
                    <span class="floatR2">View</span>
                    <span class="clear"></span>
                </div>
                <div class="eaten">
                     <ul class="data">
                        @*@foreach (var reportResult in resultGroup.OrderByDescending(r=>r.Date))
                        {*@
                            <li class="data row" ng-repeat="report in group.reports" ng-controller="relatedReportsController">
                                <div class="suitcase">
                                    <span class="col-xs-10 zero accountNumberColumn"></span>
                                    @*<span class="middle zero">@reportResult.Date.Replace("12:00:00","")</span>*@
                                    <span class="middle zero">{{report.Date}}</span>
                                    <span class="floatR2">
                                        <a class="icon-view glyph" target="_blank" href="@Url.ActionEncodedParameters("ViewDocument", "DocumentSearch", new { id = reportResult.Id })"></a>
                                    </span>
                                    <span class="clear"></span>
                                </div>

如你所见,我需要很多帮助。提前谢谢!

1 个答案:

答案 0 :(得分:0)

我在controller.js中编写的代码没有正确获取数据。在尝试使用我在互联网上找到的样本组合时,我感到非常困惑。我昨天想通了。我不需要通过controller.js获取数据,因为数据已经通过我的页面controller.cs和viewmodel获取。我最终需要的是使用ng-show来显示和隐藏各个部分。

感谢您抽出宝贵时间尝试提供帮助。