Rajath Shetty Rajath Shetty - 2 months ago 8
AngularJS Question

ng-if is condition is not in Ng-repeat

Is it possible to hide the row of

ng-repeat
using
ng-if
condition?

We are trying to restrict the displaying the
ng-repeat
row using
ng-if
condition. Here, I'm checking for the value five and three if it is not there then I need to hide the row.



angular
.module('myApp', [])
.controller('TodoCtrl', function($scope) {
$scope.comments = [{
type: 'one'
}, {
type: 'two'
}, {
type: 'three'
}, {
type: 'four'
}]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<div ng-app="myApp">
<div ng-controller="TodoCtrl">
<table>
<tr ng-repeat="data in comments">
<td ng-if="data.type == 'five' ">five</td>
<td ng-if="data.type == 'three' ">Three</td>
</tr>
</table>
</div>
</div>





Output:

five Three five Three five Three five Three


Expected output:

Three Three Three Three

Answer

It's always preferred to initialize your angular module with a name instead of making it blank.

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. For more details see below snippet... More information ngif

var myApp = angular.module('myApp', []);

myApp.controller('TodoCtrl', function($scope) {
    $scope.comments = [
    {
        type: 'one'
    }, {
        type: 'two'
    }, {
        type: 'three'
    }, {
        type: 'four'
    }
    ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TodoCtrl">
    <div >
        <table>
            <tr ng-repeat="data in comments">
                <td ng-if="data.type == 'five'"> five </td>
                <td ng-if="data.type == 'three'"> Three </td>
            </tr>
        </table>
    </div>
</div>