Javascript 是否按数组名称重复筛选？

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

样本：

以及显示父数组中每个产品的以下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>

我想能够过滤的品牌名称阵列名称，宏碁，苹果等产品

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

---

我有点拘泥于此，因为JSON结构是非常嵌套的，如果它是1/2级别，我就能够应付，但我无法理解这一点，我似乎只显示所有产品或破坏应用程序。关于这个问题的最佳实践方法有什么建议吗？我想我可能需要创建一个自定义过滤器？将不胜感激

添加此过滤器，它将采用一个品牌：

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

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

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

---

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

小提琴：

---

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

如果您可以使数据采用此格式：

$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>

---

下面是一个。

你能给我们一个JSON本身的例子吗？@ExplosionPills-modified-post-with-link谁在创建这个JSON？如果可以的话，你可能应该改变它-笔记本现在不需要是一个数组，它是一个由一个对象组成的数组，但是你可以将它改变为一个具有可过滤属性的对象数组。我已经创建了JSON，稍后将添加其他属性，例如智能手机和平板电脑，它们将是新的arraysDoes做您需要的事情吗？ifbool{return true；}else{return false；}是冗余的您的答案已出现在低质量帖子队列中。请添加一个解释，说明您的代码是如何解决OPs问题的。notebook repeat中的品牌只是显示所有JSON数据？我得到的是“0”-我更喜欢您发布的第一个方法，因为它不会使HTMLUpdated变得臃肿，问题是笔记本阵列的布局。它有一个键，还有一个数组，里面有一个元素，所有的东西都在里面。现在-我想我需要改变我的JSON的结构…？是的，我不明白，我使用的代码和你一样，它不适合我？

$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'
};

<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>