Question

我正在制作仪表板，并试图显示某个数据。在我的范围内，我有一个由几个字段和一组用户组成的项目。用户包括以下字段：

USER_ID
USER_NAME
USER_EMAIL
作用

我想显示与某个值匹配的角色的user_name。有没有办法在我的html文件中执行此操作，还是建议在我的控制器中执行此操作？

我的表格代码如下：

<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>

提前致谢！

Answer 1

<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>

假设角色是特定角色

Answer 2

如果project.data包含具有角色属性（project.role）的对象，那么您可以使用角度过滤器来过滤该属性，如下所示

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>

详细了解过滤器here。

this SO问题

中的更多示例

<强>更新

要设置默认过滤器值，您可以在控制器中设置roleSearch：

$scope.roleSearch = 'Admin';

要按users.role过滤，请添加此过滤器

filter:{ users.role: roleSearch }

Answer 3

您可以使用filter:role

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

以下是我为解决问题而采取的一个例子，

<!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>

只需将角色更改为“管理员”并检查过滤器

即可

Here is the DEMO link which contain ADMIN role

AngularJS显示具有匹配值的索引数据

3 个答案: