Question

我有一个嵌套数组来显示表数据，这里我写了一个条件来显示tr。如果ng-if="detail.college!='ddd'"此条件不满足tr则不应显示。
但表格行显示不正确。我做错了什么？

＆＃13;

var app= angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.init = function(){
    $scope.data =[
   [
    {
    'name':'john',
    'college':'aaa',
    'department':'aaa',
    'age':20
    },
    {
    'name':'jss',
    'college':'bbb',
    'department':'bbb',
    'age':22
    }
  ],
  [
    {
    'name':'jack',
    'college':'ccc',
    'department':'ccc',
    'age':25
    },
    {
    'name':'bfff',
    'college':'ddd',
    'department':'ddd',
    'age':18
    }
 ]    
];
}
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
  <table ng-repeat="list in data">
  <thead>
     <tr>
        <th>{{list[0].name}}</th>
      </tr>
  </thead>
  <tbody>
  <tr ng-repeat="detail in list" ng-if="detail.college!='ddd'">
      <td width="14%">{{leave.college}}</td>
      <td width="20%">{{leave.department}}</td>
      <td>{{leave.age}}</td>
    </tr>
  </tbody>
  </table>
</div>

＆＃13;

Answer 1

您的数据结构不正确。我修改了它。请看看，我删除了错误的对象。

<强>控制器：

$scope.data =[
   [
    {
    'name':'john',
    'college':'aaa',
    'department':'aaa',
    'age':20
    },
    {
    'name':'jss',
    'college':'bbb',
    'department':'bbb',
    'age':22
    }
  ],
  [
    {
    'name':'jack',
    'college':'ccc',
    'department':'ccc',
    'age':25
    },
    {
    'name':'bfff',
    'college':'ddd',
    'department':'ddd',
    'age':18
    }
 ]    
];

<强> HTML：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
  <table ng-repeat="list in data">
  <thead>
     <tr ng-repeat="detail in list" ng-if="detail.college!='ddd'">
        <th>{{detail.name}}</th>
      </tr>
  </thead>
  <tbody>
  <tr ng-repeat="detail in list" ng-if="detail.college!='ddd'">
      <td width="14%">{{leave.college}}</td>
      <td width="20%">{{leave.department}}</td>
      <td>{{leave.age}}</td>
    </tr>
  </tbody>
  </table>
</div>

Answer 2

经过一番挖掘后，我遇到了一个奇怪的问题，即ng-repeat在tr上没有正常工作，所以我做了一些改动。

使用div代替表格进行首次ng-repeat。
重组了json，因为它没有效。
删除了init函数，因为我们可以直接访问数据。

＆＃13;

var app= angular.module('myApp',[]);
app.controller('myController',function($scope){

$scope.data =[
  [
    {
      "name": "john",
      "college": "aaa",
      "department": "aaa",
      "age": 20
    },
    {
      "name": "jss",
      "college": "bbb",
      "department": "bbb",
      "age": 22
    }
  ],
  [
    {
      "name": "jack",
      "college": "ccc",
      "department": "ccc",
      "age": 25
    },
    {
      "name": "bfff",
      "college": "ddd",
      "department": "ddd",
      "age": 18
    }
  ]
];

});

＆＃13;

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="list in data track by $index">
    <span>
    <strong> {{list[0].name}}</strong>
    </span>
    <table>
      <tr ng-repeat="detail in list" ng-if="detail.college!='ddd'">
        <td width="14%">{{detail.college}}</td>
        <td width="20%">{{detail.department}}</td>
        <td>{{detail.age}}</td>
      </tr>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>

＆＃13;

如何使用ng-if显示表行

2 个答案: