AngularJS没有过滤产品列表 [英] AngularJS not filtering products list

查看：116 发布时间：2016/5/12 19:33:56 javascript angularjs model-view-controller filtering

本文介绍了AngularJS没有过滤产品列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有AngularJS过滤我的产品列表中的一个问题。我已经做了我的变量数的console.log查询，似乎都很好。问题是，该视图不更新以显示经过滤的产物。

当你输入的输入框中的搜索文本

筛选工作完全正常，但在分类菜单项，当点击这是行不通的。

我想按类别筛选的产品列表中，当用户点击该菜单项。

请看看我的code以下，任何帮助或建议是大大AP preciated。

我的app.js

  myApp.controller（'StoreController'，函数（$范围，$过滤器，storeFactory，cartFactory）{
  $ scope.cartTotal = 0;
  $ scope.cartItems = [];
  $ scope.categories = [];
  $ scope.counted = 0;
  $ scope.filteredProducts = {};  //获取产品
  storeFactory.getProducts（功能（结果）{
    $ scope.products = results.products;
    $ scope.counted = $ scope.products.length;
    $ scope.filteredProducts = results.products;
  }）;  $范围。$表（搜索，功能（查询）{
    如果（$ scope.filteredProducts.length）{
      $ scope.filteredProducts = $过滤器（过滤器）（$ scope.products，查询）;
      $ scope.counted = $ scope.filteredProducts.length;
    }
  }）;  $ scope.filterProductsByCategory =功能（类别名）{
    的console.log（'类别过滤器'）;
    / * $ scope.products.forEach（函数（O，I）{
      的console.log（'过滤器'）;
      如果（o.category_id！==的categoryId）{
       $ scope.filteredProducts.splice（I，1）;
       的console.log（'删除'）;
       的console.log（O）;
      }
    }）; * /
    $ scope.filteredProducts = $过滤器（过滤器）（$ scope.filteredProducts，类别名称）;
    console.info（'经过滤项'）;
    的console.log（$ scope.filteredProducts）;
    $ scope.counted = $ scope.filteredProducts.length;
  }  $ scope.getCategories =功能（）{
    storeFactory.getCategories（功能（结果）{
      $ scope.categories = results.rows;
    }）;
  }      $ scope.getCategories（）;
}）;

我的store.htm

更新：
我删除了额外的控制器参考，在一个DIV包裹的一切。

 ＆LT; DIV NG控制器=StoreController＆GT;      ＆LT;！ - 侧边栏产品菜单 - ＆GT;
       ＆LT;＆GT DIV CLASS =块内容崩溃;
        ＆LT; DIV CLASS =日报NG-重复=类别中的类别|排序依据：'名'＆GT;
          ＆LT; DIV CLASS =的手风琴组＆GT;
            ＆LT; DIV NG点击=filterProductsByCategory（category.category_name）级=的手风琴切换崩溃＆GT; {{category.category_name}}＆LT; / DIV＆GT;
          ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;      ＆LT;！ - 负载存储物品开始 - ＆GT;
        ＆LT; DIV CLASS =标签＆GT;显示{{计算}}产品（S）LT; / DIV＆GT;
        ＆LT; DIV CLASS =行NG重复=产品在filteredProducts |排序依据：PRODUCT_NAME的风格=保证金左：0像素;宽度：550px;＆GT;
          ＆LT;小时＆GT;＆LT; /小时＆GT;
          ＆LT; DIV CLASS =span1的风格=宽度：120像素;＆GT;            ＆LT;！ - ＆LT;数据拨动=收藏的href =＃carouselLightBox＆GT; - ＆GT;
            ＆LT;一个数据切换=收藏的href =＃carouselLightBox {{PRODUCT.PRODUCT_ID}}＆GT;
            ＆所述;！ -  IMG ALT = {{product.product_name}}纳克-SRC ={{product.image}}SRC ={{product.image}}/  - ＆GT;
                ＆LT; IMG ID =TMP级=SRC =图像/产品/ {{product.product_image_filename}}ALT =＆GT;＆LT; / IMG＆GT;
            ＆所述; / A＆GT;
            ＆LT; DIV CLASS =收藏夹隐藏变脸ID =carouselLightBox {{PRODUCT.PRODUCT_ID}}的风格=显示：无;＆GT;
              ＆LT; DIV CLASS ='收藏夹内容'＆GT;
                ＆LT; IMG SRC =图像/产品/ {{product.product_image_filename}}ALT =/＆GT;
                  ＆所述;！ -  IMG ALT = {{product.product_name}}纳克-SRC ={{product.image}}SRC ={{product.image}}/  - ＆GT;
                  ＆LT;按钮类=BTN BTN-主要ID =close_lightboxNG点击=closeBox（PRODUCT.PRODUCT_ID，$事件）＆GT;关闭＆LT; /按钮＆GT;
              ＆LT; / DIV＆GT;
                ＆LT;风格＆GT;
                  #close_lightbox
                  {
                    位置：绝对的;
                    上图：5像素;
                    右：5像素;
                  }
                ＆LT; /风格＆GT;
            ＆LT; / DIV＆GT;
          ＆LT; / DIV＆GT;          ＆LT; DIV CLASS =span6的风格=WIDTH：330px;保证金底：15px的;＆GT;
            ＆LT; H5的风格=FONT-SIZE：14px的;字体重量：大胆;＆GT; {{product.product_name}}＆LT; / H5＆GT;
            ＆所述p为H.; {{product.product_description}}＆下; / P＆GT;
            ＆所述p为H.;等级：{{product.category_name}}＆下; / P＆GT;
          ＆LT; / DIV＆GT;
          ＆LT; DIV CLASS =span3＆GT;
            ＆LT; p =类价格＆GT;价格：其中;强＆GT; R {{product.product_price}}＆LT; / STRONG＆GT;＆LT; / P＆GT;
              ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;    ＆LT;！ - 控制器端 - ＆GT;
    ＆LT; / DIV＆GT;

解决方案

  $ scope.filteredProducts = {};//获取产品
storeFactory.getProducts（功能（结果）{
    $ scope.products = results.products;
    $ scope.counted = $ scope.products.length;
    $ scope.filteredProducts = results.products;
}）;

是 results.products 对象的数组或对象的对象呢？因为 $过滤器（'过滤器'）（$ scope.products，查询）; 期望 $ scope.products 是阵列

  $范围。$表（搜索，功能（查询）{
    如果（$ scope.filteredProducts.length）{
        $ scope.filteredProducts = $过滤器（过滤器）（$ scope.products，查询）;
        $ scope.counted = $ scope.filteredProducts.length;
    }
}）;

下面就是我想这应该是这样，你会不会需要 $观看语句或 filteredProducts 阵列/对象，在控制器：

  $ scope.search ='';
$ scope.products = [];
$ scope.categories = ['类别1，类别2，类别3'];//假设你的存储功能的getProducts这里返回一个承诺
storeFactory.getProducts（）。然后（功能（结果）{
    $ scope.products = results.products; //需要将产品对象的数组
}）;$ scope.filterProductsByCategory =功能（类）{
    $ scope.search =类别;
};

然后在你的HTML部分，这不正是你的如何，我只是显示你在这里较短的形式什么是可能的：

 ＆LT;按钮NG重复=猫类NG点击=filterProductsByCategory（猫）＆GT; {{猫}}＆LT; /按钮＆GT;＆LT; DIV CLASS =行NG重复=产品在产品|过滤器：搜索|排序依据：这里给'＆GT;
    ＆LT;！ - 产品信息在这里 - ＆GT;
＆LT; / DIV＆GT;

我创建了一个的jsfiddle证明： http://jsfiddle.net/mikeeconroy/QL28C/1/
您可以自由使用任何形式的长期搜索或点击一个按钮类别。

I am having an issue with AngularJS filtering my products list. I have done a few console.log queries on my variables and all seem fine. The problem is that the view does not update to show the filtered products.

Filtering works perfectly fine when you enter the search text in the input box but it does not work when clicking on the Category menu items.

I would like to filter the product list by category when the user clicks on the menu item.

Please see my code below and any help or advice is greatly appreciated.

My app.js

myApp.controller('StoreController', function($scope, $filter, storeFactory, cartFactory) {
  $scope.cartTotal = 0;
  $scope.cartItems = [];
  $scope.categories = [];
  $scope.counted = 0;
  $scope.filteredProducts = {};

  //get the products
  storeFactory.getProducts(function(results) {
    $scope.products = results.products;
    $scope.counted = $scope.products.length;
    $scope.filteredProducts = results.products; 
  });

  $scope.$watch("search", function(query){
    if($scope.filteredProducts.length) { 
      $scope.filteredProducts = $filter("filter")($scope.products, query);
      $scope.counted = $scope.filteredProducts.length; 
    }
  });

  $scope.filterProductsByCategory = function(categoryName){
    console.log('category filter');
    /*$scope.products.forEach(function(o,i){
      console.log('filter');
      if( o.category_id !== categoryId ){
       $scope.filteredProducts.splice(i,1);
       console.log('removing');
       console.log(o);
      }
    });*/
    $scope.filteredProducts = $filter("filter")($scope.filteredProducts, categoryName);
    console.info('the filtered items');
    console.log($scope.filteredProducts);
    $scope.counted = $scope.filteredProducts.length;
  } 

  $scope.getCategories = function(){
    storeFactory.getCategories(function(results){
      $scope.categories = results.rows; 
    });
  }

      $scope.getCategories();
});

My store.htm

UPDATE : I removed the extra controller reference and wrapped everything in one div.

<div ng-controller="StoreController">

      <!-- the sidebar product menu -->
       <div class="block-content collapse in">
        <div class="daily" ng-repeat="category in categories | orderBy:'name'">
          <div class="accordion-group">
            <div ng-click="filterProductsByCategory(category.category_name)" class="accordion-toggle collapsed">{{category.category_name}}</div>
          </div>
        </div>
      </div>    
      </div>

      <!-- Load store items start -->
        <div class="label">Showing {{counted}} Product(s)</div> 
        <div class="row" ng-repeat="product in filteredProducts | orderBy:'product_name'" style="margin-left: 0px; width: 550px;">
          <hr></hr>
          <div class="span1" style="width: 120px;">

            <!--         <a data-toggle="lightbox" href="#carouselLightBox"> -->
            <a data-toggle="lightbox" href="#carouselLightBox{{product.product_id}}">
            <!--img alt={{ product.product_name }} ng-src="{{product.image}}" src="{{product.image}}" /-->
                <img id="tmp" class="" src="images/products/{{product.product_image_filename}}" alt=""></img>
            </a>
            <div class="lightbox hide fade" id="carouselLightBox{{product.product_id}}" style="display: none;">
              <div class='lightbox-content'>
                <img src="images/products/{{product.product_image_filename}}" alt="" />
                  <!--img alt={{ product.product_name }} ng-src="{{product.image}}" src="{{product.image}}" /-->
                  <button class="btn btn-primary" id="close_lightbox"  ng-click="closeBox(product.product_id, $event)">Close</button>
              </div>
                <style>
                  #close_lightbox
                  {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                  }
                </style>
            </div>
          </div>

          <div class="span6" style="width: 330px; margin-bottom: 15px;">
            <h5 style="font-size: 14px; font-weight: bold;">{{product.product_name}}</h5>
            <p>{{product.product_description }}</p>
            <p>Category : {{product.category_name}}</p>
          </div>
          <div class="span3">
            <p class="price">Price : <strong>R{{ product.product_price }}</strong></p>
              </div>
        </div>

    <!-- end of controller -->
    </div>

解决方案

$scope.filteredProducts = {};

//get the products
storeFactory.getProducts(function (results) {
    $scope.products = results.products;
    $scope.counted = $scope.products.length;
    $scope.filteredProducts = results.products;
});

Is results.products an array of objects or an object of objects? Because $filter('filter')($scope.products,query); expects $scope.products to be an array.

$scope.$watch("search", function (query) {
    if($scope.filteredProducts.length) {
        $scope.filteredProducts = $filter("filter")($scope.products, query);
        $scope.counted = $scope.filteredProducts.length;
    }
});

Here's what I'm thinking this should look like and you won't need the $watch statement or the filteredProducts array/object, In controller:

$scope.search = '';
$scope.products = [];
$scope.categories = ['category1','category2','category3'];

// assuming that your store function getProducts returns a promise here
storeFactory.getProducts().then(function(results){
    $scope.products = results.products; // needs to be an array of product objects
});

$scope.filterProductsByCategory = function(category){
    $scope.search = category;
};

Then in your HTML Partial, this is not exactly how your's is, I'm just showing you here in shorter form what is possible:

<button ng-repeat="cat in categories" ng-click="filterProductsByCategory(cat)">{{cat}}</button>

<div class="row" ng-repeat="product in products | filter:search | orderBy:'product_name'">
    <!-- Product Information Here -->
</div>

I created a JSFiddle to demonstrate: http://jsfiddle.net/mikeeconroy/QL28C/1/ You can free form search with any term or click a button for a category.

这篇关于AngularJS没有过滤产品列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

AngularJS没有过滤产品列表 [英] AngularJS not filtering products list

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

AngularJS没有过滤产品列表 [英] AngularJS not filtering products list

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭