ngRepeat按数组名称过滤？

Question

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

范例： 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等）过滤产品。

默认情况下，只有“ Apple”产品可见。 然后，您将单击一个按钮来更改可见结果，以反映您选择的品牌。 因此，如果您选择HP，则只会看到“ HP”产品。

我对此有点坚持，因为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;
};

这将查看每个品牌，仅允许返回true的品牌。 如果您有一个将$ scope.SelectedBrandName值更改为其他名称的按钮，它将自动通过ng-repeat筛选仅匹配的品牌。