Show/hide a record based on condition inside ng-repeat not working

Question

Below are my records :

$scope.currentSelection = "Admin";

$scope.records = [
     { id: 'Employee', params:[]},
     { id: 'Skills', params:[]},
     { id: 'Payroll', params:[]},
     { id: 'Appraisal', params:[]},
     { id : 'Statistics',params:[]}
];

Now if $scope.currentSelection is admin then I want to show all items with statistics(Employee,Skills,Payroll,Appraisal,Statistics) else I don't want to show Statistics rest other items (Employee,Skills,Payroll,Appraisal) if $scope.currentSelection is Guest or Employee.

But the problem is when currentSelection is Admin then others items are not showing up except statistics.

Note: I don't want to use a filter for this.

But the problem

 var app = angular.module("myApp", []); app.controller("MyController", function ($scope) { $scope.currentSelection = "Admin"; $scope.records = [ { id: 'Employee', params:[]}, { id: 'Skills', params:[]}, { id: 'Payroll', params:[]}, { id: 'Appraisal', params:[]}, { id : 'Statistics',params:[]} ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <ul ng-app="myApp" ng-controller="MyController"> <li ng-repeat="item in records"> <div ng-show="currentSelection=='Admin' && item.id=='Statistics'">{{item.id}} </div> </li> </ul> 

Answer 1

Your check is wrong,

1) It should be ng-show="currentSelection=='Admin' if you want to show every list items.

2) It should be ng-show="currentSelection=='Guest ' ||currentSelection=='Employee' && item.id!=='Statistics'" if you want to show every list items except statistics.

 var app = angular.module("myApp", []); app.controller("MyController", function ($scope) { $scope.currentSelection = "Admin"; $scope.records = [ { id: 'Employee', params:[]}, { id: 'Skills', params:[]}, { id: 'Payroll', params:[]}, { id: 'Appraisal', params:[]}, { id : 'Statistics',params:[]} ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyController"> <ul ng-show="currentSelection=='Admin'"> <li ng-repeat="item in records"> {{item.id}} </li> </ul> <ul ng-show="currentSelection=='Guest' || currentSelection=='Employee'"> <li ng-repeat="item in records" ng-if="item.id!=='Statistics'"> {{item.id}} </li> </ul> </div> 

Answer 2

You need to Change your show condition currentSelection === 'Admin' && item.id === 'Statistics' to currentSelection === 'Admin' && item.id !== 'Statistics' .

 var app = angular.module("myApp", []); app.controller("MyController", function ($scope) { $scope.currentSelection = "Non"; $scope.records = [ { id: 'Employee', params:[]}, { id: 'Skills', params:[]}, { id: 'Payroll', params:[]}, { id: 'Appraisal', params:[]}, { id : 'Statistics',params:[]}]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <ul ng-app="myApp" ng-controller="MyController"> <div ng-if="currentSelection === 'Admin'"> <li ng-repeat="item in records"> <div>{{item.id}}</div> </li> </div> <div ng-if="currentSelection !== 'Admin'"> <li ng-repeat="item in records" ng-show="item.id !== 'Statistics'"> <div>{{item.id}}</div> </li> </div> </ul> 

Answer 3

You can put a check on li tag itself. no need of extra div to put check. This will remove blank li bulltes.

 var app = angular.module("myApp", []); app.controller("MyController", function ($scope) { $scope.currentSelection = "Admin"; $scope.records = [ { id: 'Employee', params:[]}, { id: 'Skills', params:[]}, { id: 'Payroll', params:[]}, { id: 'Appraisal', params:[]}, { id : 'Statistics',params:[]} ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <ul ng-app="myApp" ng-controller="MyController"> <li ng-repeat="item in records" ng-if="currentSelection=='Admin' && item.id!=='Statistics'"> <div >{{item.id}} </div> </li> </ul> 

Answer 4

Use ng-if instance of ng-show

 var app = angular.module("myApp", []); app.controller("MyController", function ($scope) { $scope.currentSelection = "Admin"; $scope.records = [ { id: 'Employee', params:[]}, { id: 'Skills', params:[]}, { id: 'Payroll', params:[]}, { id: 'Appraisal', params:[]}, { id : 'Statistics',params:[]} ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyController"> <ul ng-repeat="item in records"> <li ng-if="currentSelection === 'Admin' && item.id!=='Statistics'"> <div>{{item.id}}</div> </li> </ul> </div>