目前，如果我過濾 BookingID 和 Product，我會在 UI 中看到過濾后的結果。如何為名稱添加過濾器？因為此名稱來自另一個陣列并根據 id 獲取
需要根據 BookingID、Product 和 name 欄位添加過濾器這是我的代碼：
<div ng-app="datatable" ng-controller="datacontroller">
<md-card>
<div layout="row" style="height:50px; vertical-align: middle;">
<md-input-container md-no-float class="md-block" flex="85" >
<input ng-model="searchBooking" type="text" placeholder="Search">
</md-input-container>
</div>
</md-card>
<md-table-container>
<table md-table>
<thead md-head md-order="filter">
<tr md-row>
<th md-column><span>BookingID</span></th>
<th md-column><span>Product</span></th>
<th md-column><span>Name</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="row in filterBooking() | orderBy:filter">
<td md-cell>{{row.BookingID}}</td>
<td md-cell>{{row.Product}}</td>
<td>
<md-select ng-model="row.UserID" ng-change="test(row)">
<md-option ng-repeat="user in users" ng-value="user.id">{{user.name}}</md-option>
</md-select>
</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>
控制器
angular.module("datatable", ['ngRoute', 'ngMaterial', 'md.data.table']).controller("datacontroller", ['$scope', function($scope) {
$scope.bookings = [
{
"BookingID":1,
"Product":"test",
"Shop":"A",
"ContactNumber":124,
"UserID":1
},
{
"BookingID":2,
"Product":"bgh",
"Shop":"d",
"ContactNumber":345,
"UserID":2
}
];
$scope.users = [
{
"id":1,
"name":"abc"
},
{
"id":2,
"name":"xyz"
}
]
$scope.searchBooking = '';
$scope.filterBooking = function () {
return $scope.bookings.filter(function (item) {
return (
item.BookingID.toString().indexOf($scope.searchBooking) > -1||
( item.Product.toLowerCase().indexOf($scope.searchBooking.toLowerCase()) > -1)
);
});
};
}]);
請指教
用戶名來自不同的陣列，所以我不確定應該如何過濾名稱
uj5u.com熱心網友回復：
因此，如果您首先為您的預訂陣列中的每個物件添加一個“名稱”屬性，使其值與您的“用戶”陣列交叉匹配，這將使您的生活更輕松，因為您可以過濾如下：
<tr md-row ng-repeat="row in filterBooking() | orderBy:' name'">
'name' 是每個物件中的新屬性， 表示升序。
可以通過一個簡單的 for 回圈將“name”屬性添加到您的預訂陣列的專案中。
for (var i=0; i<$scope.bookings.length; i ) {
$scope.bookings[i].name = $scope.users.filter(function(_){ _.id === $scope.bookings[i].UserID })[0].name;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/470902.html