Question

我的Angular应用程序中有以下JSON结构：

JSON Structure

示例：http://pastie.org/pastes/9476207/text?key=u6mobe15chwyiz1jakn0w

以下HTML显示父数组中的每个产品：

<div class="bb-product-grid" ng-repeat="brand in notebooks">
    <ul ng-repeat="products in brand">
        <li ng-repeat="Notebook in products">
            <span class="product-title">{{Notebook.Model}}</span>
            <span class="product-description"><p>{{Notebook.Description}}</p></span>
            <span class="product-image">image</span>
            <span class="product-add-to-bundle"><button>Add to bundle</button></span>
            <span class="product-price">{{Notebook.Price}}<sub>pcm</sub></span>
        </li>
    </ul>
</div>

我希望能够按品牌名称（数组名称，Acer，Apple等）过滤产品。

默认情况下，只有＆＃39; Apple＆＃39;产品将是可见的。然后，您将点击按钮更改可见结果，以反映您选择的品牌。因此，如果您选择HP，那么您只能看到HP＆＃39;产品

我很少坚持这个因为JSON结构是非常嵌套的，如果它是1/2级别我能够应付但是我无法解决这个问题，我似乎只显示所有产品或打破应用程序。关于最佳实践方法的任何建议（我猜测我可能需要创建自定义过滤器吗？）将不胜感激！

Answer 1

如果您可以使用这种格式的数据：

$scope.data = [
  {
    brand: 'Acer',
    laptops: ['acer_1', 'acer_2', 'acer_3', 'acer_4', 'acer_5']
  },
  {
    brand: 'Apple',
    laptops: ['apple_1', 'apple_2', 'apple_3', 'apple_4', 'apple_5']
  },
  {
    brand: 'Asus',
    laptops: ['asus_1', 'asus_2', 'asus_3', 'asus_4', 'asus_5']
  },
  {
    brand: 'HP',
    laptops: ['hp_1', 'hp_2', 'hp_3', 'hp_4', 'hp_5']
  },
  {
    brand: 'Lenovo',
    laptops: ['lenovo_1', 'lenovo_2', 'lenovo_3', 'lenovo_4', 'lenovo_5']
  },
  {
    brand: 'Toshiba',
    laptops: ['toshiba_1', 'toshiba_2', 'toshiba_3', 'toshiba_4', 'toshiba_5']
  }
];

然后你可以使用像这样的过滤器：

$scope.search = {
  brand: 'HP'
};

使用HTML：

<select ng-model="search.brand">
  <option ng-repeat="company in data">{{company.brand}}</option>
</select>
<ul ng-repeat="company in data | filter:search">
  <li><b ng-bind="company.brand"></b></li>
  <ul ng-repeat="laptop in company.laptops">
    <li ng-bind="laptop"></li>
  </ul>
</ul>

这是jsfiddle。

Answer 2

brands是一个对象数组，品牌名称为键。使用过滤器来解决这个问题是没有意义的...但是如果你有密钥名称，很容易获得产品。想象一下，您有searchName = 'Apple'和obj = [{Apple: []}, {Acer: []}]。您可以使用obj[0].Apple。

this.filterItem = "Apple";
this.productsToShow = productObject[0][this.filterItem];

<select ng-model=ctrl.filterItem><!-- brand names go here --></select>
<ul ng-repeat="product in ctrl.productsToShow">

Answer 3

当只有一个应该是可见的时，不要使用过滤器。相反，跳过品牌的迭代，而只是迭代选定的品牌。您需要做的就是确保将selectedBrand设置为数据结构的正确子集。

小提琴：http://jsfiddle.net/5wwboysu/2/

Show brand:
<span ng-repeat="(name,brand) in notebooks.Notebooks[0]" ng-click="selected(brand)">
   {{name}} -  <br>
</span>

<ul ng-repeat="products in selectedBrand">
    <!-- snip -->
</ul>

$scope.selected = function(brand) {
      $scope.selectedBrand = brand;  
};

但是，如果您可以控制JSON，我会尝试以更适合您尝试的格式返回它。

Answer 4

添加此过滤器，该过滤器将采用品牌：

 <ul ng-repeat="brand in notebooks| filter:filterBrand">

控制器中的

$scope.SelectedBrandName= "Apple";

$scope.filterBrand = function(brand){
if(brand.Name == $scope.SelectedBrandName)
    return true;

 return false;
};

这将关注每个品牌，只允许品牌返回真实。如果您有一个将$ scope.SelectedBrandName值更改为其他名称的按钮，它将自动将ng-repeat过滤到仅匹配的品牌。

ng按阵列名称重复过滤？

4 个答案: