ng-if 显示默认值答案

【问题标题】：ng-if to Show Default Valueng-if 显示默认值
【发布时间】：2016-06-21 18:47:54
【问题描述】：

我有这样的数据结构：

$scope.classes = [
      {Dept:'Science', Class:'101'},
      {Dept:'Science', Class:'102'},
      {Dept:'Science', Class:'103'},
      {Dept:'Arts', Class:'111'},
      {Dept:'Arts', Class:'112'},
      {Dept:'Arts', Class:'113'}];

$scope.professors = [
      {Dept:'Science', Class:null, Name:'John Smith'},
      {Dept:'Science', Class:'101', Name:'Eric Doe'},
      {Dept:'Arts', Class:null, Name:'Mary Smith'},
      {Dept:'Arts', Class:'111', Name:'Frank Moore'}
    ]

我想在 Dept 和 Class 都匹配时显示教授的姓名。如果没有，请显示该部门的教授姓名（Class=null）。

但是，我的结果是这样的：

Dept:Science   Dept:Science   Dept:Science   Dept:Arts   Dept:Arts   Dept:Arts
Class:101      Class:102      Class:103      Class:111   Class:112   Class:113

John Smith     John Smith     John Smith     Mary Smith  Mary Smith  Mary Smith
Eric Doe                                     Frank Moore

如何使结果看起来像：

Dept:Science  Dept:Science  Dept:Science  Dept:Arts   Dept:Arts   Dept:Arts
Class:101     Class:102     Class:103     Class:111   Class:112   Class:113

Eric Doe      John Smith    John Smith    Frank Moore Mary Smith  Mary Smith

这是我的fiddle

【问题讨论】：

water42，我要做的是在他/她的部门和班级名称都与班级集合中的名称匹配时显示正确的教授姓名。并在只有 Dept 名称匹配时显示默认教授名称（Class Name = null）。
<div ng-if="prof.Class === null && !$scope.hasProfessor(class)，其中$scope.hasProfessor(class) 搜索$scope.professors 以查看该课程已经有一位教授与之关联。如果您可以向$scope.classes.class、hasProfessor 添加另一个属性，并在第一个ng-if 触发时将其设置为true，这会更快。然后你可以做 <div ng-if="prof.Class === null && !class.hasProfessor 而不是一个函数

标签： angularjs angularjs-ng-repeat angular-ng-if

【解决方案1】：

感谢 @water42 提供了可能的解决方案的想法。

我试过了，效果很好。

function TodoCtrl($scope) {
		$scope.classes = [
    	{Dept:'Science', Class:'101'},
      {Dept:'Science', Class:'102'},
      {Dept:'Science', Class:'103'},
      {Dept:'Arts', Class:'111'},
      {Dept:'Arts', Class:'112'},
      {Dept:'Arts', Class:'113'}];
    
    $scope.professors = [
	    {Dept:'Science', Class:null, Name:'John Smith'},
      {Dept:'Science', Class:'101', Name:'Eric Doe'},
      {Dept:'Arts', Class:null, Name:'Mary Smith'},
      {Dept:'Arts', Class:'111', Name:'Frank Moore'}
    ];
    
    $scope.classes = $scope.classes.map(function(roomClass) {
    			var professor_count = $scope.professors.filter(function(professor) {
        		  return professor.Class === roomClass.Class;
        	});
         roomClass.hasProfessor = professor_count.length > 0;
         return roomClass;
    });
    
    console.log($scope.classes);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

<div ng-app>
  <div ng-controller="TodoCtrl">
       <table>
        <tr>
          <th width="10%" ng-repeat="class in classes track by $index">
            Dept:{{class.Dept}} <br/>
            Class:{{class.Class}}
          </th>
        </tr>
        <tr>
          <td width="10%" ng-repeat="class in classes track by $index">
            <div ng-repeat="prof in professors" ng-if="prof.Dept === class.Dept">
              <div ng-if="class.hasProfessor && prof.Class === class.Class">
                  {{prof.Name}}
              </div>
               <div ng-if="!class.hasProfessor && prof.Class === null">
                  {{prof.Name}}
              </div>
            </div>
          </td>          
        </tr>
    </table>
  </div>
</div>

【讨论】：