带有ng-if的模态中的angularjs ng-repeat答案

【问题标题】：angularjs ng-repeat in a modal with ng-if带有ng-if的模态中的angularjs ng-repeat
【发布时间】：2015-05-28 14:49:49
【问题描述】：

我有一个需要在模式弹出窗口中显示的数据列表。此模式是在引导程序中完成的。我有一个附加到这个 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> 可以有任何东西，基于此，我会以模式填充表格。

【问题讨论】：

标签： javascript json angularjs angularjs-ng-repeat angular-ng-if

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您应该在 ng-repeat 上使用过滤器 (http://docs.angularjs.org/api/ng.filter:filter) 而不是 ng-if，以从表中排除某些项目。

【讨论】：

docs.angularjs.org/error/ngRepeat/…