Question

我目前正在使用PHP和AngularJS的网站，我有一个产品列表和一个下拉列表，其中包含一些链接，允许用户按类型过滤产品（电吉他，原声吉他等......）有没有办法做一个功能，过滤ng-repeat只显示其类型为选定的产品？

这就是我目前所拥有的：

<article class="producto" ng-repeat="product in dbproducts | filter:prodsearch">
    <div class="img">
        <img src="products/img/{{product.Imagen}}" alt="{{product.Marca + ' ' + product.Modelo}}">
        <p class="product-model">{{product.Marca + ' ' + product.Modelo}}</p>
        <span class="product-price">{{product.Precio | currency: '€'}}</span>
    </div>
    <div class="check">
        <div class="paygroup">
            <p class="price" ng-bind="product.Precio | currency: '€'"></p>
            <button class="buy"><i class="fa fa-shopping-cart"></i>{{'BUTTON_BUY' | translate}}</button>
            <p>{{'BUTTON_AVAILABLE' |translate}}: {{product.Unidades_disponibles}} </p>
        </div>
    </div>
    <div class="txt">
        <p>Test, hola,  {{ $index }}</p>
    </div>
    <span class="close fa fa-times fa-inverse"></span>
</article>

Answer 1

所以，如果我的代码正确，你的ng-repeat中已经有了一个管道过滤器：

| filter:prodsearch

所以我想在输入中的某个地方直接或在控制器中将用户输入绑定到变量“prodsearch”并且ng-repeat是实时过滤的。

以同样的方式，您可以使用按钮，无论它们是否在下拉列表中，哪个点击操作会将某个文本分配给“prodsearch”变量。

Answer 2

filter就是你想要的。另一种方法是使用产品的副本数组来显示和编写更新产品数组的函数。此函数接收类型，只需将相关产品添加到显示项目。

这样的事情：

<强>控制器

在ng-change下拉列表中调用此功能

$scope.filters = ["all", "electric", "guitars", "acoustic", "guitars"];
$scope.selectedFilter = "all";

$scope.filterProds() {
  if ($scope.selectedFilter == "all") {
    $scope.dbproductsToShow = $scope.dbproducts;
  } else {
    $scope.dbproductsToShow = [];
    $scope.dbproducts.forEach(function(itm) {
      if (itm['type'] == filter) {
        $scope.dbproductsToShow.push(itm);
      }
    });
  }
}

在您的 Html

中

 <select ng-model="selectedFilter" ng-options="filter in filters" ng-change="filterProds()"></select>

 <article class="producto" ng-repeat="product in dbproductsToShow">

Answer 3

我已经修好了，我做的是：

在ng-repeat中添加另一个名为filter：producttype
添加了$ scope.producttypevariable;
每次单击下拉列表中的链接时更改变量的值，以便按类型过滤。这样：

<li ng-click="producttype='electrica'"><a>Guitarras eléctricas</a></li>

感谢您的帮助和提示，对不起，如果这种方法不是最好的，我自己学会了角度（我不是一个好的自学者）。

AngularJS当我点击链接时我想过滤一个数组

3 个答案: