AngularJS具有匹配值的索引顯示數據

我在儀表板上工作，正在嘗試顯示某一段數據。在我的範圍內，我有一個由幾個字段和一組用戶組成的項目。用戶包括以下字段：AngularJS具有匹配值的索引顯示數據

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>

提前感謝！

來源

2017-03-29 Lesleyvdp

嘗試添加過濾器的作用'|過濾器：role' –

如果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';

要由用戶進行篩選。角色添加此過濾器

filter:{ users.role: roleSearch }

來源

2017-03-29 07:46:07

這似乎是這樣做的一個很好的方式。不過，我希望在頁面加載時自動發生。所以我可以添加一個默認的roleSearch值。我的第二個問題是，這個角色並不直接在項目範圍內，它可以在項目中找到。用戶[index]代替。 – Lesleyvdp

@Lesleyvdp更新了我的答案 –

這個作品非常完美，我很感謝你！ – Lesleyvdp

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

假設作用是特定的角色

來源

2017-03-29 07:40:43

您可以使用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"> 
 
\t 
 
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

來源

2017-03-29 08:12:42 Sravan

AngularJS具有匹配值的索引顯示數據

回答

相關問題