Question

我有三种类型的产品组：

导入（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时，它都会显示在每个过滤器中（＆＃39; / products / import＆＃39;，＆＃39; / products / export＆＃39;和＆＃39; /产品/非欧盟＆＃39;。）

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

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

你能告诉我们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; }); });

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

要按特定字段过滤，您可以;

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

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

希望它有所帮助！

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

4 个答案: