ngRepeat按数组名称过滤？

Question

I have the following JSON structure in my Angular app:

Sample: http://pastie.org/pastes/9476207/text?key=u6mobe15chwyiz1jakn0w

And the following HTML which is displaying every product in the parent array:

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

I want to be able to filter the products by the brand names (array names, Acer, Apple etc.).

By default, only the 'Apple' products will be visible. You will then click a button to change the visible results to reflect what brand you've selected. So if you then select HP, you'll only see 'HP' products.

I'm a little stuck on this because the JSON structure is pretty nested, if it was 1/2 levels I'd be able to cope but I can't figure this out, I seem to only show all the products or break the app. Any advice on the best-practise approach to this (I'm guessing I might have to create a custom filter?) will be greatly appreciated!

Answer 1

If you can get your data to be in this format:

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

Then you can use have a filter like so:

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

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

Here is a jsfiddle .

Answer 2

brands is an array of objects with the brand names as keys. It doesn't make sense to use filters to solve this problem ... however it's easy to get the products if you have the key name. Imagine you have searchName = 'Apple' and obj = [{Apple: []}, {Acer: []}] . You could just use 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

Don't use filter, when only ever one is supposed to be visisble. Instead, skip the iteration over the brands, and instead just iterate over the selected brand . All you need to do is then make sure you set selectedBrand to the correct subset of your data structure.

Fiddle: 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;  
};

However, if you have control over the JSON, I'd try to return it in a format better suited for what you're trying to do.

Answer 4

Add this filter which will take a brand:

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

in controller

$scope.SelectedBrandName= "Apple";

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

 return false;
};

This will look at each brand and only allow brands that return true. If you have a button that changes the $scope.SelectedBrandName value to a different name, it will automatically filter through the ng-repeat to only brands that match.