1

I have a data structure like this:

$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'}
    ]

I want to show the professor's name when the Dept and Class both match. If not, show the professor's name for that Dept (with Class=null).

However, my result looks like this:

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

How do I make the result look like:

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  

Here's my fiddle

2
  • water42, what I'm trying to do is to show the right professor name when both of his/her Dept and Class Name match the ones from the classes collection. And show the default professor name when only the Dept name matches (with the Class Name = null).
    – notlkk
    Commented Jun 21, 2016 at 19:08
  • 1
    <div ng-if="prof.Class === null && !$scope.hasProfessor(class), where $scope.hasProfessor(class) searches $scope.professors to see the class already has a professor associated with it. This would be faster if you could add another property to $scope.classes.class, hasProfessor, and set that to true when the first ng-if triggers. Then instead of a function you could do <div ng-if="prof.Class === null && !class.hasProfessor
    – sdemurjian
    Commented Jun 21, 2016 at 19:20

1 Answer 1

0

Credit to @water42 for giving the idea for the possible solution.

I tried it out and it works.

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.