按对象属性进行角度过滤

Question

我有选择框，我需要按选择值过滤列表。但我只需要使用对象属性进行过滤。

<select class="form-control input-sm" ng-model="product.name" ng-options="lottery.name for lottery in lotteries track by lottery.name">

<table class="table order-details">
<tr ng-repeat="item in transaction.order.items | filter: {item.productName: product.name}">
    <td>{{item.item}}</td>
    <td>{{item.productName}}</td>
    <td>{{item.amount}}</td>
    <td>Auto renewal {{item.autoRenew}}</td>
    <td><a class="link">View order</a>
    </td>
</tr>

我想要的是仅当所选框中的product.name与item.productName相同时才进行过滤。

Answer 1

将您的filter更改为：

<div ng-repeat="product in products | filter: myPropertyFilter">

在范围上，您可以定义过滤方法：

$scope.myPropertyFilter = function (item) { 
    // in here you can do any filter logic you like, e.g.
    return $scope.product.name === item.productName; 
};

这是一个实例： http://plnkr.co/edit/02aKft?p=preview

Answer 2

请参阅随附的摘录

var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {

  $scope.transaction = {
    order: {
      items: [

        {
          item: "Video",
          productName: "Super Video",
          amount: 1,
          autoRenew: true
        }, {
          item: "DVD",
          productName: "Super DVD",
          amount: 2,
          autoRenew: true
        }

      ]
    }
  };

  $scope.lotteries = [{
    name: "Super Video"
  }, {
    name: "Super DVD"
  }]

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">

    <select class="form-control input-sm" ng-model="product" ng-options="lottery.name for lottery in lotteries track by lottery.name"></select>
   
    <table class="table order-details">
      <tr ng-repeat="item in transaction.order.items |filter: {productName: product.name} ">
        <td>{{item.item}}</td>
        <td>{{item.productName}}</td>
        <td>{{item.amount}}</td>
        <td>Auto renewal {{item.autoRenew}}</td>
        <td><a class="link">View order</a>
        </td>
      </tr>
    </table>
  </div>
</div>