AngularJS display data of index that has matching value

Question

I am working on a dashboard and am trying to display a certain piece of data. In my scope I have a project which consists of a couple fields and an array of users. The users consist of the following fields:

user_id
user_name
user_email
role

I want to display the user_name of the role which matches a certain value. Is there a way to do this within my html file or is it recommended to do this in my controller?

My table code looks as follows:

<tbody md-body>
        <tr md-row md-select="project" md-select-id="name" md-auto-select
            ng-repeat="project in projects.data | orderBy : myOrder">
            <td md-cell ng-click="getProject()">{{project.title}}</td>
            <td md-cell><i class="material-icons" style="color: green">radio_button_checked</i></td>
            <td md-cell>{{project.phase}}</td>
            <td md-cell>{{project.budget_indication}}</td>
            <td md-cell>{{project.users}}</td> <!-- Display user with specific role -->
            <td md-cell>{{project.start_date | date:dd/MM/yyyy}}</td>
        </tr>
</tbody>

Thanks in advance!

try adding filter for role `|filter:role` – Jayant Patil Mar 29 '17 at 07:41 — Jayant Patil, Mar 29 '17 at 07:41

Ankit Kumar Gupta · Answer 1 · 2017-03-29T07:48:49.400

<tbody md-body>
        <tr md-row md-select="project" md-select-id="name" md-auto-select
            ng-repeat="project in projects.data | orderBy : myOrder"  ng-if="project.users === 'role'">
            <td md-cell ng-click="getProject()">{{project.title}}</td>
            <td md-cell><i class="material-icons" style="color: green">radio_button_checked</i></td>
            <td md-cell>{{project.phase}}</td>
            <td md-cell>{{project.budget_indication}}</td>
            <td md-cell>  {{project.users}} </td> <!-- Display user with specific role -->
            <td md-cell>{{project.start_date | date:dd/MM/yyyy}}</td>
        </tr>
</tbody>

Assuming role is specific role

score 0 · Accepted Answer · edited May 23 '17 at 12:17

If the project.data contains objects which has the role property (project.role) then you could use angular filter to filter against that property like this

Search by role: <input type="text" ng-model="roleSearch">

<tbody md-body>
        <tr md-row md-select="project" md-select-id="name" md-auto-select
            ng-repeat="project in projects.data | filter:{ role: roleSearch }| orderBy : myOrder">
            <td md-cell ng-click="getProject()">{{project.title}}</td>
            <td md-cell><i class="material-icons" style="color: green">radio_button_checked</i></td>
            <td md-cell>{{project.phase}}</td>
            <td md-cell>{{project.budget_indication}}</td>
            <td md-cell>{{project.users}}</td> <!-- Display user with specific role -->
            <td md-cell>{{project.start_date | date:dd/MM/yyyy}}</td>
        </tr>
</tbody>

More examples in this SO question

Update

To set the default filter value, you could set the roleSearch in the controller:

$scope.roleSearch = 'Admin';

To filter by the users.role add this filter

filter:{ users.role: roleSearch }

This seems like a good way of doing it. However I would like to make it happen automatically when the page is loaded. So I could add a default roleSearch value. My second issue is that role is not directly in the scope of project, it can be found in project.users[index] instead. — Lesleyvdp, Mar 29 '17 at 07:57

score 0 · Answer 3 · answered Mar 29 '17 at 08:12

You can use filter:role

<div>{{x.users | filter: role= "User"}}</div>

Here is an example I have taken to get your solution,

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
 
Role: {{ role ? role : 'All Data'}}    <br><br>

<div ng-repeat="x in projects">
  <div>{{x.users | filter: role= role}}</div>
  
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.projects = [{
  users:  [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany",
      "Role": "User"
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden",
      "Role": "Admin"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico",
      "Role": "User"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria",
      "Role": "Admin"
    }
  ]
  }]
  
  $scope.role = "User"
  
  });
</script>

</body>
</html>

Just change the role to "Admin" and check the filter

Here is the DEMO link which contain ADMIN role

AngularJS display data of index that has matching value

3 Answers3