如何使用基于对象数组内的元素的角度过滤器

Question

我的数组看起来像这样：

    [
{orderDetails: {seatid:1,orderId:12}, orderLine: Array(1)},
{orderDetails: {seatid:2,orderId:13}, orderLine: Array(2)},
{orderDetails: {seatid:3,orderId:14}, orderLine: Array(1)},
{orderDetails: {seatid:4,orderId:14}, orderLine: Array(3)}
    ]

在我的HTML代码中我有这样的东西：

<input id="seat_number" ng-model="seatNumberSearch" type="text" class="validate">

<ul class="orderList">
<li class="order" ng-repeat="order in orders | filter: {orderDetails.seat_number : seatNumberSearch}">
<p>Customer name: <span class="b">{{order.orderDetails.customer_name}}</span><br>Order ID: <span class="b">{{order.orderDetails.id}}</span><br>Seat ID: <span class="b">{{order.orderDetails.seat_number}}</span></p>
</li>
</ul>

每次我跑这个， 它显示以下错误消息：

Syntax Error: Token '.' is unexpected, expecting [}] at column 31 of the expression [orders | filter: {orderDetails.seat_number : seatNumberSearch}] starting at [.seat_number : seatNumberSearch}].

注意：订单详细信息具有更多的键值对我只是不将它包含在数组中以使其变短。

我想根据seatID过滤数据。如何在嵌套对象中使用过滤器？

Answer 1

不幸的是，您应该创建customFilter : 'orderDetails.seat_number' : seatNumberSearch：

＆＃13;

＆＃13;

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.orders = [{ 
      orderDetails: { seatid: 1, orderId: 12, seat_number: '10' },
      orderLine: Array(1)
    }, {
      orderDetails: { seatid: 2, orderId: 13, seat_number: '21' },
      orderLine: Array(2)
    }, {
      orderDetails: { seatid: 3, orderId: 14, seat_number: '30' },
      orderLine: Array(1)
    }, {
      orderDetails: { seatid: 4, orderId: 14, seat_number: '42' },
      orderLine: Array(3)
    }
  ]
}).filter('customFilter', function() {
  return function(data, nested, search) {    
    if (!search)
      return data;
    var props = nested.split('.');
    return data.filter(function(x) {            
      var temp = x;
      for(var prop of props){
         temp = temp[prop];
         if(!temp)
            return false;
      }
      return temp.indexOf(search) != -1;
    });
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
  <input id="seat_number" ng-model="seatNumberSearch" type="text" class="validate">
  <ul class="orderList">
    <li class="order" ng-repeat="order in orders | customFilter : 'orderDetails.seat_number' : seatNumberSearch">
      <p>seatid: {{order.orderDetails.seatid}}, seat_number: {{order.orderDetails.seat_number}}</p>
    </li>
  </ul>
  <div>

＆＃13;

＆＃13;

＆＃13;