根據ng-repeat內部條件顯示/隱藏記錄

Question

以下是我的記錄：

$scope.currentSelection = "Admin";

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

現在，如果$ scope.currentSelection是admin，那么我想顯示所有具有statistics(Employee,Skills,Payroll,Appraisal,Statistics)否則我不想顯示統計其余的其他項目（雇員，技能，工資，評估），如果$ scope.currentSelection是Guest或Employee。

但是問題是當currentSelection為Admin時，除統計信息外，其他項目均未顯示。

注意：我不想為此使用過濾器。

但是問題

 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

您的支票錯了，

1）如果要顯示每個列表項，則應為ng-show="currentSelection=='Admin' 。

2）如果要顯示除統計信息以外的所有列表項，應為ng-show="currentSelection=='Guest ' ||currentSelection=='Employee' && item.id!=='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

您需要將顯示條件currentSelection === 'Admin' && item.id === 'Statistics'更改為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

您可以檢查li標簽本身。 不需要額外的div來檢查。 這將刪除空白的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

使用ng-show ng-if實例

 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>