Adnan Adnan -4 years ago 57
AngularJS Question

How to use ng-if to show table row in Angular?

I have tried to show a table row by rule using ng-if but unluckily, it doesn't work.

I have tried the same code with other elements such as p and div, and it works with them..

I'm going to use the following code to get results of a search, so if somebody has searched for something then results should be active and ng-repeat will repeat results from a REST call, otherwise it should repeat data from default REST call.

So I have two rest calls, and results should be separated.

The current html code:

<tr ng-if="searchActive==0" dir-paginate="reservation in reservations | filter:q | itemsPerPage: pageSize | orderBy:sortType:sortReverse " current-page="currentPage" ng-init="currentPage=1">
<tr ng-if="searchActive==1" dir-paginate="reservation in reservationSearchResult | filter:q | itemsPerPage: pageSize | orderBy:sortType:sortReverse " current-page="currentPage" ng-init="currentPage=1">


And inside my controller:

// Search reservation by date
$scope.searchActive = 0;
$scope.searchForReservations = function(search){
$scope.reservationSearchResult = ReservationsSearch.search({
from: search.from,
to: search.to
}).$promise.then(function(){
$scope.searchActive = 1;
})
}

Answer Source

I believe the issue you're having is that dir-paginate is going to repeat the control it's placed in, which works great for tags like <p>, <li>, <div>, etc, but <tr></tr> are the table row tags and require <td>content</td> which is not being created with dir-paginate.

Try something like this:

<tr ng-if="searchActive==0" dir-paginate="reservation in reservations | filter:q | itemsPerPage: pageSize | orderBy:sortType:sortReverse " current-page="currentPage" ng-init="currentPage=1"><td>{{reservation.FIELD}}</td></tr>

<tr ng-if="searchActive==1" dir-paginate="reservation in reservationSearchResult | filter:q | itemsPerPage: pageSize | orderBy:sortType:sortReverse " current-page="currentPage" ng-init="currentPage=1"><td>{{reservation.FIELD}}</td></tr>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download