angularjs ng-repeat 在模态中使用 ng-if

Question

I have a list of data which i need to show in a modal popup. This modal is done in bootstrap. I have a controller attached to this html. Based on selected type or click i have to open the popup and display data in it in tabular format.

<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>

and the controller looks like this.

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;
  }
}

I have all $scope.allDimensions which contains all the object.My object looks like this.

{"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
}]}

I am not able to make this work.

Is there any way i can have ng-repeat use with ng-if and make this scenario work. ng-if="dim==<some value> can have any anything and based on that I would populate the table in a modal.

Answer 1

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

Answer 2

If you're just looking to have your data displayed then take a look at my Fiddle . This I believe is what you need..

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