Question

我有

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

我希望按＆＃34; vendor.name＆＃34;过滤我的商品领域，我不知道如何使它成为现实，它是我在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 >

Answer 1

您可以像这样过滤vendor.name：

＆＃13;

vendor.js

＆＃13;

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
  }]
});

＆＃13;

我如何在angularJS throw链接中过滤我的数据？

1 个答案: