如何使用ng-if控制表格行显示？嵌套数组渲染异常排查

嘿，我帮你找出问题所在啦！你的表格行无法正常显示主要是变量名拼写错误导致的，另外还有个小优化点可以提一下，咱们一步步来解决：

1. 核心错误：变量名不匹配 #

你在<td>标签里绑定的是leave.college、leave.department这些变量，但你的ng-repeat循环定义的变量是detail（ng-repeat="detail in list"），这就导致Angular找不到对应的数据，自然无法渲染出表格内容啦！

只需要把所有{{leave.xxx}}替换成{{detail.xxx}}，这个问题就能解决。

2. 可选优化：用过滤器替代ng-if（更高效） #

虽然修正变量名后，ng-if="detail.college!='ddd'"就能正常隐藏目标行，但把ng-if和ng-repeat放在同一个元素上，Angular会先循环所有元素再逐个判断条件，效率稍低。你可以用Angular的内置过滤器提前过滤数据：

<tr ng-repeat="detail in list | filter:{college:'!ddd'}">

这样循环前就会把college为ddd的数据过滤掉，性能更好，代码也更简洁。

修复后的完整代码 #

<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>姓名</th>
        <th>学院</th>
        <th>部门</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <!-- 用过滤器过滤掉college为ddd的数据，同时修正变量名 -->
      <tr ng-repeat="detail in list | filter:{college:'!ddd'}">
        <td width="14%">{{detail.college}}</td>
        <td width="20%">{{detail.department}}</td>
        <td>{{detail.age}}</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
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 }
      ]
    ];
  }
})
</script>

如果坚持想用ng-if的话，修正变量名后的代码也能正常工作：

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

内容的提问来源于stack exchange，提问作者laz