angularJSスローリンクでデータをフィルタリングする方法は？

Question

のようなそのルックス私はHTMLで

を持っている：私はベンダー」で私の項目をフィルタリングしたい

{ 
    "name": "Bra by Joseline", 
    "category": null, 
    "price": 8370.0, 
    "old_price": 8370.0, 
    "vendor": { 
     "id": 1, 
     "name": "Agent Provocateur", 
     "seo_name": "" 
    }, 
    "recommended": [], 
    "id": 750 
} 

：私のJSONで

<ul class="filter-ul"> 
       <li class="filter-li"> 
        <span class="filter-title">Все бренды</span> 
        <ul class="filter-ul" ng-repeat="brand in vendors |filter:query_brand"> 
         <li class="filter-li"><a href="<!--TODO filtering by links-->" class="filter-link checkable">{{ brand.name }}</a></li> 

        </ul> 
       </li> 

      </ul> 

1つの項目は次のようになります.name "フィールドと私はどのようにそれを現実にするか分からない、angJSの私の最初のexpirience、noob質問申し訳ありません:)

このような私のコントローラの外観：

(function() { 
    'use strict'; 

    angular 
     .module('beo.products.controllers') 
     .controller('ProductsListController', ProductsListController); 

    ProductsListController.$inject = ['$scope', '$http']; 


    function ProductsListController($scope, $http) { 

     $scope.setMainClasses('catalog-page'); 



     activate(); 


     function activate() { 

      $http.get('api/v1/products/').success(function(data) { 
        $scope.products = data; 
        $scope.ProductSortLeft = '-id'; //по умолчанию фильтроваться будут по обновлению 
      }); 
      $http.get('api/v1/categories/').success(function(data) { 
        $scope.categories = data; 
      }); 

      $http.get('api/v1/shops/').success(function(data) { 
        $scope.shops = data; 
      }); 

      $http.get('api/v1/vendors/').success(function(data) { 
        $scope.vendors = data; 
      }); 
     } 
    } 


})(); 

私はこのようなフィルタ列を使用します。

<filter></filter> 


<!-- CATALOG --> 
<div class="catalog-main" id="catalog"> 

    <div class="catalog-result-options hidden-xs"> 
     <div class="result-alert" id="result-show-modal">Уведомление о рапродаже</div> 

     <select class="selectpicker" ng-model="ProductSortLeft"> 
      <option value="-price">Самые дорогие</option> 
      <option value="price">Самые дешевые</option> 
      <option value="click_count">Популярные</option> 
      <option value="-id">Новые</option> 
     </select> 


    </div> 

    <div class="catalog-item" ng-repeat="product in products | orderBy:ProductSortLeft"> 
     <div class="item-pre-title"> 
      Бесплатная доставка $150+ 
     </div> 
     <div class="item-img"> 
      <a href="/products/{{ product.id }}/"><img ng-src="{{ product.picture[0].external_img_url }}" width="150px" 
                 height="150px" alt=""></a> 
     </div> 
     <a href="/products/{{ product.id }}/" class="item-title">{{ product.name }}</a> 
     <div class="item-price"> 
      <div class="price-old">{{ product.old_price }}</div> 
      <b>{{ product.price }}</b> 
     </div> 
     <div class="item-footer"> 
      <a href="#" class="item-view"></a> 
      <div class="item-sales-alert"> 
       Получить скиду 
      </div> 
     </div> 
    </div > 

Answer 1

あなたはこのようなvendor.nameにフィルタリングすることができます。

var app = angular.module('myapp', []); 
 
app.controller('myctrl', function($scope) { 
 
    $scope.filter = ""; 
 
    $scope.brands = [{ 
 
    "name": "Bra by Joseline", 
 
    "category": null, 
 
    "price": 8370.0, 
 
    "old_price": 8370.0, 
 
    "vendor": { 
 
     "id": 1, 
 
     "name": "Agent Provocateur", 
 
     "seo_name": "" 
 
    }, 
 
    "recommended": [], 
 
    "id": 750 
 
    }, { 
 
    "name": "Another brand", 
 
    "category": null, 
 
    "price": 8370.0, 
 
    "old_price": 8370.0, 
 
    "vendor": { 
 
     "id": 1, 
 
     "name": "Agent Bond", 
 
     "seo_name": "" 
 
    }, 
 
    "recommended": [], 
 
    "id": 750 
 
    }] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp" ng-controller="myctrl"> 
 
    <input ng-model="filter" placeholder="filter" /> 
 
    <ul class="filter-ul" ng-repeat="brand in brands | filter: {vendor: {name: filter}}"> 
 
     <li class="filter-li">{{ brand.name }}</li> 
 
     </ul> 
 
</div>