2016-04-12 3 views
0

я естьКак я могу отфильтровать свои данные в angularJS, вызывать ссылки?

enter image description here

в HTML его выглядит как:

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

Один пункт в моем Json выглядит следующим образом:

{ 
    "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 ", и я понятия не имею, как сделать его реальностью, его мое первое выживание в angularJS, извините за вопрос 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 > 
+0

вы можете использовать фильтр custome для этого. –

+0

Вы имеете в виду * sort * (отображение в другом порядке) вместо фильтра? В противном случае я не могу понять ваш вопрос. – Marc

+0

Я добавляю свой контроллер, вы можете помочь мне с настраиваемым фильтром? –

ответ

0

Вы можете фильтровать 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>

+0

Мне нужна фильтрация по ссылкам :( –

+0

Я предполагаю, что меня смутило ваше предложение «Я хочу, чтобы мои элементы были связаны с полем« vendor.name »... Я не вижу любые URL-адреса в json, откуда идут ссылки? – fikkatra

+0

Да, я хочу фильтр по имени vendor.name, но вот здесь (http://www.shopstyle.com/browse/handbags) –

Смежные вопросы