Question

以下是我的记录：

$scope.currentSelection = "Admin";

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

现在，如果$ scope.currentSelection是管理员，那么我想要显示statistics(Employee,Skills,Payroll,Appraisal,Statistics)的所有项目，否则我不想显示统计休息其他项目（员工，技能，工资单，评估），如果$ scope .currentSelection是Guest或Employee。

但问题是当currentSelection是Admin时，其他项目除了统计信息外没有显示。

注意：我不想为此使用过滤器。

但问题是

＆＃13;

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:[]}
     ];
 });

＆＃13;

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

＆＃13;

Answer 1

你的支票错了，

1）如果您想显示每个列表项，则应为ng-show="currentSelection=='Admin'。

2）如果您想显示除统计信息以外的所有列表项，则应为ng-show="currentSelection=='Guest ' ||currentSelection=='Employee' && item.id!=='Statistics'"。

＆＃13;

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:[]}
];

        });

＆＃13;

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

＆＃13;

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

的ng-show个实例

＆＃13;

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:[]}
];
});

＆＃13;

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

＆＃13;

根据ng-repeat中的条件显示/隐藏记录不起作用

4 个答案: