Navigating a list using AngularJS within an HTML view: tips and tricks!

Question

Navigating a list using AngularJS within an HTML view: tips and tricks!

Implementing AngularJS within the context of the Ionic framework. The $scope on the front-end consists of:

an object User that contains a list of sports:

$scope.user = { sports: { "running": true, "football": true } }
a list named "matches" containing users and their respective sports. For example:

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

Within the 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 am aiming to visually emphasize the shared sports between $scope.user and each $scope.matches.user (e.g. highlighting them in red).

Any suggestions on how I could achieve this?

Thank you

javascript angularjs

Answer 1

Answer №1

Manipulating the DOM can be efficiently done by creating a directive that seems to be the most suitable option. A directive can be designed to receive both $scope.user and $scope.matches.user, allowing for the application of highlights to common elements.

Another method to consider is utilizing the ng-class directive to apply highlights depending on an expression.

Answer 2

Manipulating the DOM can be efficiently done by creating a directive that seems to be the most suitable option. A directive can be designed to receive both $scope.user and $scope.matches.user, allowing for the application of highlights to common elements.

Another method to consider is utilizing the ng-class directive to apply highlights depending on an expression.

Answer 3

Answer №2

To streamline the management of matches in ng-repeat, consider converting it into an array of objects...

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

Next, assign 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 4

To streamline the management of matches in ng-repeat, consider converting it into an array of objects...

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

Next, assign 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 5

Answer №3

It is essential to handle these tasks within the Controller. Business logic should not be placed in Angular Views.

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 6

It is essential to handle these tasks within the Controller. Business logic should not be placed in Angular Views.

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>

Navigating a list using AngularJS within an HTML view: tips and tricks!

Answer №1

Answer №2

Answer №3

Similar questions

Draggable resizing of the Accordion component in React.js using Material-UI

Showing particular URL text upon opening a new window using JavaScript

Creating an inverted curve or border-radius for a div element is a design technique that can add

Selenium is throwing an ElementNotInteractableError indicating that the element is not able to be

Updating the quantity of a product within a state in React allows for easy manipulation of that

How can I implement a page switch in vuejs by clicking on a name in a table list?

When iterating through HTML Elements using the forEach method, the getElementsByClassName function is not capable of targeting these specific elements

Secure API Calls with Prismic while Keeping Access Tokens Hidden

rails/jquery/ajax: The completion function is not being triggered

Utilize Redux Toolkit to efficiently share actions across different slices of state

Develop a custom script function for every instance of a @foreach loop

The functionality of Ajax is limited when it comes to handling multiple div elements at the same

Using TypeScript for Routing in Angular

Is there a way to incorporate TypeScript type definitions into a JavaScript module without fully transitioning to TypeScript?

How come the HTML page served by the express.js route isn't linked to a CSS stylesheet?

Creating a function in a JavaScript module that can be exported to the window namespace

Utilizing typesafe trpc in Node.js to efficiently transfer data between routes

Having trouble updating the route with the $location service, even after attempting to use $scope.apply

Monitoring Clicks within an Iframe

Initiating change notification when utilizing service communication