Angular - 如何根据 ng-repeat 中的 id 过滤对象？

Question

我有 3 种类型的产品组：

• 导入（product_group_id 值 = 1）
• 导出（product_group_id 值 = 2）
• 非欧盟（product_group_id 值 = 3）

每个组都包含产品。我可以确定每个产品在我的产品创建中属于哪个产品组。

现在，我将这些产品汇总到产品索引中。我使用ng-repeat 执行此操作，并且我想根据 product_group_id 过滤产品，如下所示：

<div style="display: inline;" class="btn-group">

    <a href="/products/export" type="submit" 
    class="{{ $product_group_id == 1 ? 'btn btn-primary' : 'btn btn-default' }}" 
    role="button">@lang('product.export')</a>

    <a href="/products/import" type="submit" 
    class="{{ $product_group_id == 2 ? 'btn btn-primary' : 'btn btn-default' }}" 
    role="button">@lang('product.import')</a>

    <a href="/products/non-eu" type="submit" 
    class="{{ $product_group_id == 3 ? 'btn btn-primary' : 'btn btn-default' }}" 
    role="button">@lang('product.non_eu')</a>

</div>


<table class="table table-hover product-table" ng-controller="ProductCtrl">

    <thead>
        <tr>
            <th></th>
            <th>#</th>
            <th>@lang('product.name')</th>
        </tr>
    </thead>

    <tbody>

        <tr ng-repeat="products in product | filter:SearchProduct" ng-cloak>

            <td><input type="checkbox" name="product_id" class="checkbox" 
            value="@{{product.id}}"></td>

            <td><a href="@{{ url('/products/' . product_id) }}">
            @{{product.id}}</a></td>  

            <td><a ng-href="/products/@{{ product.id }}">
            @{{product.name | uppercase}}</a></td> 

        </tr>

    </tbody>

</table>  

ProductService.js：

.controller('ProductCtrl', function($scope, $http) {

    $http.get('/api/product')
    .success(function(response) {
        $scope.products = response;
    });

}); 

我在控制器中将 product_group_id 设置为 1、2 和 3。

每次我创建一个新的$product 时，它都会显示在每个过滤器中（“/products/import”、“/products/export”和“/products/non-eu”）。

所以，我的问题是，如何在我的ng-repeat 中过滤我在$product_group_id 上的产品？

Answer 1

查看 filter 页面上的示例。使用一个对象，并设置product_id 属性

Search by product_id: <input type="text" ng-model="SearchProduct.product_id">
<tr ng-repeat="product in products | filter:SearchProduct"> 

Answer 2

您可以按特定字段进行过滤；

<tr ng-repeat="product in products | filter:{product_group_id: SearchProduct}" ng-cloak></tr>

这允许过滤您在过滤器中使用的特定字段：{} 对象。

希望对你有帮助！

Answer 3

看看this 非常基本的例子，它的要点如下：

  <div class="row">
    <button class="btn btn-xs" type="button" placeholder="Search" ng-click="myFilter = {product_group_id: 1}">Group 1</button>
    <button class="btn btn-xs" type="button" placeholder="Search" ng-click="myFilter = {product_group_id: 2}">Group 2</button>    
  </div>
  <br/>
  <div class="row">
    <table id="results" class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th>Product Name</th>
          <th>Brand</th>
          <th>PG</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="product in products | filter:myFilter ">
          <td id="productName">{{product.productName}}</td>
          <td id="brand">{{product.brand}}</td>
          <td id="product_group_id">{{product.product_group_id}}</td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 4

你能告诉我们ProductCtrl吗？

$product_group_id 真的是用 $scope.$product_group_id 定义的吗

您是否在路线中设置了 $product_group_id？

通常，只有当您想让它成为书签时，您才需要这里的任何路线。

这是一个类似的问题，方法有效但没有路线：link

除此之外：

<a href="@{{ url('/products/' . product_id) }}">

在这里使用 ng-href

编辑： 你用一种非常复杂的方法来做这件事。回答你的问题：

<a ng-click="$product_group_id=1" type="submit" 
class="{{ $product_group_id == 1 ? 'btn btn-primary' : 'btn btn-default' }}" 
role="button">@lang('product.export')</a>

<a ng-click="$product_group_id=2" type="submit" 
class="{{ $product_group_id == 2 ? 'btn btn-primary' : 'btn btn-default' }}" 
role="button">@lang('product.import')</a>

<a  ng-click="$product_group_id=3" type ="submit" 
class="{{ $product_group_id == 3 ? 'btn btn-primary' : 'btn btn-default' }}" 
role="button">@lang('product.non_eu')</a>

你的重复：

    <tr ng-repeat="products in product | filter:SearchProductFn" ng-cloak>

你的控制器：

.controller('ProductCtrl', function($scope, $http) {
    $scope.SearchProductFn = function(product) {
        return product.group.id == $product_group_id && product.name == $scope.SearchName;
     } 
    $http.get('/api/product')
    .success(function(response) {
        $scope.products = response;
    });
});