How to go through a list with AngularJs in HTML view?

Question

Using AngularJS in the Ionic framework. On the front-end side the $scope contains

1. an object User which contains a list of sports:

   $scope.user = { sports: { "running": true, "football": true } }

2. a list named "matches" that contains a list of users and each user has sports. example:

   matches = { userA: {..., sports: {"running": true, "football": true} }, userB: {..., sports: {"rugby": true, "football": true} }

In y front-end:

<ion-item class="item-thumbnail-left" ng-repeat="match in matches track by match.user.uid">
  <img>
  <span>{{match.user.firstname}} {{match.user.lastname}}</span>
  <h3>{{match.user.position}} - {{match.user.lob}}</h3>
  <h3>@{{match.company}}</h3>
  <h4>{{match.score}} sport(s): </h4>
  <h4 ng-repeat="sport in match.user.sports track by sport.id" style="float: left;">
    {{sport.name}}
  </h4>
</ion-item>

I want to highlight the sports that $scope.user has in common with each $scope.matches.user (for instance let's say color the sports in red).

How would you suggest I do this?

Thanks

Answer 1

These things must be done in the Controller. Angular Views aren't the place where make Business Logic.

function UserCtrl($scope, user, users) {
  $scope.user = user;
  $scope.users = users;
  
  
  $scope.commonSports = Object
    .keys(users)
    .reduce(function(res, username, index) {
      var sports = users[username].sports;
      var common = {};
    
      for(var sport in sports) {
        if(!sports.hasOwnProperty(sport)) { 
          continue;
        }
        
        
        common[sport] = !!(sports[sport] &&
          user.sports[sport])
        ;
      }
    
      res[username] = common;
      return res;
    }, {})
  ;
  
}

angular
  .module('test', [])
  .value('user', { 
    sports: { "running": true, "football": true } 
  })
  .value('users', { 
    userA: {
      sports: {"running": true, "football": true} 
    }, 
    userB: {
      sports: {"rugby": true, "football": true} 
    }
  })
  .controller("UserCtrl", UserCtrl)
;

.highlight {
  background: yellow;
}

li span {
  display: inline-block;
  margin: 5px;
  padding: 2px 5px;
}

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


<section ng-app="test">
  <article ng-controller="UserCtrl">
  
  <div>
    <h3>You</h3>
    <ul>
      <li ng-repeat="(sport, v) in user.sports">
        <span ng-bind="sport"></span>
      </li>
    </ul>
  </div>
    
  <div>
    <h3>They</h3>
    <ul>
      <li ng-repeat="(user, sports) in commonSports">
        <strong ng-bind="user"></strong>:
        <span 
              ng-repeat="(sport, isCommon) in sports"
              ng-bind="sport"
              ng-class="{highlight: isCommon}">
        </span>
        
      </li>
    </ul>
  </div>
    
    <hr /> 
<pre><code>
{{ commonSports | json }}
</code></pre>
    
  </article>
</section>

Answer 2

You could make matches a little easier to manage in ng-repeat by making it an array of objects (if possible)...

matches = [{user: {}, sports: {"running": true, "football": true} }, {user: {}, sports: {"rugby": true, "football": true}]

Then add a class based on your uid to the current user...

  <ion-item class="item-thumbnail-left" ng-repeat="match in matches track by match.user.uid"
   ng-class="{'some-class-to-add-highlight': match.user.uid == user.uid}">
   <img>
   <span>{{match.user.firstname}} {{match.user.lastname}}</span>
   <h3>{{match.user.position}} - {{match.user.lob}}</h3>
   <h3>@{{match.company}}</h3>
   <h4>{{match.score}} sport(s): </h4>
   <h4 ng-repeat="sport in match.user.sports track by sport.id" style="float: left;">
      {{sport.name}}
   </h4>
</ion-item>

Answer 3

Once you are going to manipulate DOM, create a directive looks like the correct choice here. You can create a directive witch receives the $scope.user and $scope.matches.user and apply the highlight to the commons.

You can also use the ng-class directive to highlight based on an expression.