Question

我有一个数据列表，我需要在模态弹出窗口中显示。这个模态是在bootstrap中完成的。我有一个控制器附加到这个HTML。根据选择的类型或点击，我必须打开弹出窗口并以表格格式显示数据。

<modal  visible="showModal" >
 <div class="table-responsive" >  <!-- <div class="table-responsive" > -->
<table class="table table-bordered table-hover success table-striped table-condensed">
  <thead>
  <tr class="success"  style="table-layout:fixed">
  <th class="alignAll visited" >Country</th>
  <th class="alignAll visited" >Current Date</th>
  <th class="alignAll visited" >Previous Date</th>
  <th class="alignAll visited" >Difference</th>
  </tr>
</thead>
                                <!-- thead Ends ./ -->
<tbody id="tableRowData">
{{dim}}
<tr ng-if="dim==totalRevenue" ng-repeat="disp in allDimensions">
<td class="alignLeft" ><strong>{{disp.country}}</strong></td>
<td class="textCenter" >{{disp.prevDate}}</td>
<td class="textCenter" >{{disp.prevToPrevDate}}</td>
<td class="textCenter" >{{disp.diffRevenue}}</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" ng-click="hideModal()" data-dismiss="modal">Close</button>
</modal>

，控制器看起来像这样。

app.controller('landingPageController', function($scope,$http,$rootScope,$q)
{

/*Global Variables*/

  //Configure Every Page Aspect From MainController Such as common Calendar Dates

    /*Modal PopUp At RootScope*/

    $rootScope.showModal = false;
    $rootScope.toggleModal = function(val)
    {
        $rootScope.showModal = !$scope.showModal;
        if(val=="revenue")
        {
        $rootScope.dim = "totalRevenue";
        log($rootScope.allDimensions);  
        // Filter Data Based On Selection
        //$scope.filterDim = $.filterByDim($scope.dim,$rootScope.allDimensions);
        //  $.calculateDimensions(dim,$scope.allDimensions);
        }
        else if(val=="cartAban")
        {

            $rootScope.dim  = "cartAbandonment";

        } else if(val=="totalOrders")
        {

            $rootScope.dim = "totalOrders";

        } else if(val=="pageView")
        {

            $rootScope.dim  = "totalPageViews"; 
        }
        else
        {
            log("No Context Found");
        }

    };
    $rootScope.hideModal = function()
    {
        $rootScope.showModal =false;
  }
}

我有$ scope.allDimensions，其中包含所有对象。我的对象看起来像这样。

{"data":[

{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
},

{
    "prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
}]}

我无法完成这项工作。

我是否可以ng-repeat使用ng-if并使此方案有效。 ng-if="dim==<some value>可以有任何内容，基于此我将以模态填充表格。

Answer 1

而不是ng - 如果您应该在ng-repeat上使用过滤器（http://docs.angularjs.org/api/ng.filter:filter）来排除表格中的某些项目。

Answer 2

如果您只想显示数据，请查看我的Fiddle。我相信这就是你需要的......

<tr ng-repeat="disp in allDimensions.data">

使用ng-if在一个模态中进行angularjs ng-repeat

2 个答案: