我如何在 ng-repeat angularjs 中过滤名称?

How do i filter name in ng-repeat angularjs?

目前,如果我过滤,我会在 UI 中看到过滤后的 BookingID 和产品。如何为名称添加过滤器?因为这个名字来自另一个数组并根据 id

获取它

需要根据 BookingID、产品和名称字段添加过滤器 这是我的代码:

<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)
                    
                );
            });
        };
}]);

demo

请指教

用户名来自不同的数组,所以我不确定应该如何过滤名称

因此,如果您首先向 bookings 数组中的每个对象添加一个 'name' 属性,使其值与 'users' 数组交叉匹配,这将使您的生活更轻松,因为然后你可以像这样过滤:

<tr md-row ng-repeat="row in filterBooking() | orderBy:'+name'">

'name' 是每个对象中的新 属性,+ 表示升序。

将 'name' 属性 添加到 bookings 数组的项目中可以通过简单的 for 循环完成。

for (var i=0; i<$scope.bookings.length; i++) {
   $scope.bookings[i].name = $scope.users.filter(function(_){ _.id === $scope.bookings[i].UserID })[0].name;
}