从JSON响应中过滤ng-repeat

问题描述

我有一个关于在ng-repeat中过滤的问题。 但这不是一个简单的问题，因为我真的没有需要解决方案的问题。 在这种情况下，我正在寻找最好的答案，不需要很多代码，但仍然可以解决我想要的方法。 在我的描述中它将变得更加清晰。

简短介绍：
所以我目前正在开发一个购物应用程序。 购物应用程序通过Web服务API与现有的PrestaShop网上商店建立连接。 PrestaShop的休息API。 因此，在创建客户部分，产品部分和购物车系统后，我希望能够更新应用程序中每个产品的“库存量”。 许多人会告诉我：这很简单，只需创建一个包含来自数据库的ng-repeat响应数据的表单，以及更新库存的可能性，例如按钮ng-click事件。

好吧，我已经做到了，但现在是棘手的部分，并解释我将提供一些不太重要的例子，以使其更清楚我所要求的：

prestashop数据库
prestashop数据库是一个包含250多个表的数据库。 这些表中有通过id和属性id的各种连接。 一些简单的例子是：

1. customer表有一个id_address行连接到address表。 在此表中， address info is placed. So far, let's say updating a customer I've created a combination of update the所有“客户address info is placed. So far, let's say updating a customer I've created a combination of update the address info is placed. So far, let's say updating a customer I've created a combination of update the的客户table with the CUSTOMER_ID but also update the地址table where the ADDRESS_ID is equal to the id_address from the selected客户within the customer`表。

2. 产品还有一些链接表。 考虑价格，税收，尺寸和颜色。 id_product_attribute是可以对应于颜色或大小的attribute_id 。

如上所述，prestashop数据库结构非常详细，限于使用各种过滤器来显示所需数据。

使用webservice
因此，对于使用web服务，我使用angularJS ， javascript ， php和JSON 。 JSON是实际数据。 通过使用$http.get(url, options)我可以从数据库中获取数据。 然后显示我正在使用response的数据。 示例如下所示：

$http.get('config/get/getCustomers.php', { cache: true }).then(function (response) {
    $scope.customers = response.data.customers.customer
});

使用$scope.customers = response.data.customers.customer为我提供了显示客户数据的选项，例如，使用ng-repeat ，如下例所示

  $http.get('config/get/getCustomers.php', { cache: true }).then(function (response) { $scope.customers = response.data.customers.customer }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="row listrow" ng-repeat="customer in customers | orderBy: customer.id"> <div class="col-lg-8"> <p class="customer" ng-bind="customer.id + ' ' + customer.firstname + ' ' + customer.lastname"> </p> </div> </div> 

在这种情况下，响应将为空，因为没有数据库连接。 要在此处创建完整的测试示例，您可以在customers表中使用一些JSON数据。

{"customers":{"customer":[{"id":"1","id_default_group":"0","id_lang":"0","newsletter_date_add":"0000-00-00 00:00:00","ip_registration_newsletter":{},"last_passwd_gen":"2017-10-30 09:27:03","secure_key":{},"deleted":"0","passwd":"$2y$10$eZvPTD9bkxwSfWN7qovrmee\/Den2TqZ5a6YjcGC\/lha3oU59MCjOO","lastname":"TestStefans","firstname":"John","email":"pub@prestashop.com","id_gender":"0","birthday":"0000-00-00","newsletter":"0","optin":"0","website":{},"company":{},"siret":{},"ape":{},"outstanding_allow_amount":"0.000000","show_public_prices":"0","id_risk":"0","max_payment_days":"0","active":"1","note":{},"is_guest":"0","id_shop":"1","id_shop_group":"1","date_add":"2017-04-26 14:01:31","date_upd":"2017-10-27 15:56:54","reset_password_token":{},"reset_password_validity":"0000-00-00 00:00:00","associations":{"groups":{"@attributes":{"nodeType":"group","api":"groups"},"group":{"id":"3"}}}},{"id":"2","id_default_group":"0","id_lang":"1","newsletter_date_add":"0000-00-00 00:00:00","ip_registration_newsletter":{},"last_passwd_gen":"2017-10-27 15:56:55","secure_key":{},"deleted":"0","passwd":"$2y$10$C8M6TIuzmZjP9kh06Hai8.XyuNG9WcSi9L34oXqAuidsJkoYog4WW","lastname":"Demoers","firstname":"Demoers","email":"demo@sdwebdesign.nl","id_gender":"0","birthday":"0000-00-00","newsletter":"0","optin":"0","website":{},"company":{},"siret":{},"ape":{},"outstanding_allow_amount":"0.000000","show_public_prices":"0","id_risk":"0","max_payment_days":"0","active":"1","note":{},"is_guest":"0","id_shop":"1","id_shop_group":"1","date_add":"2017-04-26 14:01:33","date_upd":"2017-10-27 15:56:55","reset_password_token":{},"reset_password_validity":"0000-00-00 00:00:00","associations":{"groups":{"@attributes":{"nodeType":"group","api":"groups"},"group":{"id":"3"}}}}]}}

所以这里的信息是我的问题：

在处理应用程序时， stock_availables表中给出了以下数据。

因此，在使用$http.get()和response函数时，我能够创建一个用于更新股票的表单。 但是现在看一下id_product_attribute 。 该row对应于product_attribute 。 在这种情况下，大小或颜色。 现在我想过滤这些结果。 在这种情况下，通过使用例如ng-if="id_product_attribute == 0"我能够以仅显示具有此id_attribute所有方式进行过滤。 但我想展示所有这些。 所以id =“1”，id =“2”等等。但是我想知道，有没有办法以足够的方式做到这一点，不需要每个id的ng-if ？ 由于大约有50个不同的id_attribute ，每个id_attribute都对应一个颜色或大小。 那么是否有一个函数可以获得每个不同的id并以足够的方式过滤，而不是使用许多ng-if子句。 请查看以下完整代码作为示例。

 myApp.controller('ProductsController', function($scope, $http){ $http.get('config/get/getProducts.php', {cache: true}).then(function(response){ $scope.products = response.data.products.product }); // Stock check + view $http.get('config/get/getStock.php', {cache: true}).then(function (response) { $scope.stock_availables = response.data.stock_availables.stock_available }); // Update Stock $scope.updateStock = function(stock_available) { var stock_id = stock_available.id; var product_id = stock_available.id_product; var stock_quantity = stock_available.quantity; console.log(stock_id + product_id + stock_quantity); // Post to the database // }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="row listrow"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <ng-form name="stock"> <div ng-repeat="stock_available in stock_availables"> <div class="row full-width padding-tb-15" ng-if="stock_available.id_product == product.id && stock_available.id_product_attribute == 0" ng-repeat="product in products"> <div class="col-lg-12 form-stock-group hidden"> <input title="id" type="text" name="stockId" class="form-control" aria-describedby="" ng-value="stock_available.id"> </div> <div class="col-lg-4"> <h5 ng-bind="product.name.language"></h5> </div> <div class="col-lg-3"> <h5 ng-bind="product.ean13"></h5> </div> <div class="col-lg-2"> <h5 ng-bind="product.reference"></h5> </div> <div ng-if="stock_available.id_product == product.id && stock_available.id_product_attribute == 0" ng-repeat="stock_available in stock_availables" class="col-lg-1 text-center"> <input title="stock_id" type="text" name="stock_id" class="form-control hidden" aria-describedby="" ng-model="stock_available.id" ng-value="stock_available.id"> <input title="stock_id_product" type="text" name="stock_id_product" class="form-control hidden" aria-describedby="" ng-model="stock_available.id_product" ng-value="stock_available.id_product"> <h5 title="quantity" name="stockQuantity" aria-describedby="" ng-model="stock_available.quantity" ng-bind="stock_available.quantity"></h5> </div> <div ng-if="stock_available.id_product == product.id && stock_available.id_product_attribute == 0" ng-repeat="stock_available in stock_availables" class="col-lg-1 text-center"> <input title="updateStockAmount" class="form-control form-control-stock" type="number"> </div> <div class="col-lg-1 text-center"> <a ng-click="printStockLabel()"> <i class="fa fa-print" aria-hidden="true"></i> </a> </div> </div> </div> </ng-form> </div> </div> 

我试图创建以下视图：

1. 产品编号1：然后是所有尺寸，颜色等
2. 产品ID 2：然后是所有尺寸，颜色等。

是的，可以编写50个不同的ng-if语句，但我会问是否有更好，更简单，更充分的方法来做到这一点？

可以在此处找到虚拟代码的简单构建

一如既往，

提前致谢！

也许您应该问自己应用程序的哪个部分负责对这些属性进行排序。 这可能会为您带来更明显的解决方案。 如果责任转到API，那么您的请求或API应该为您的WebApp返回一个可立即使用的JSON。 如果责任转到前端WebApp，请在js代码或模板中执行。

我的猜测是你的API应该这样做，在这种情况下我可能不是最忠诚的顾问。 但是如果您决定在WebApp中执行此操作，我绝对认为您不应该使用ngIf来执行此操作，而是在JS中构建Pure Functions以构建一个或多个数组，您可以使用它们而不是太多功能名称模板中的代码。

例如，您可以.map（）您的响应并返回一个可迭代的对象，和/或用.concat（）或其他任何东西链接它。 如果您需要构建此类函数的想法，请查看示例http://reactivex.io/learnrx/

通过阅读你的问题，我建议不要使用ng-if n次，你可以在控制器内部进行过滤的逻辑

  $scope.getFilteredList = function() {
     return $scope.stock_availables.filter(function(stock) {
       return stock.id_product === $scope.selectedID;   // $scope.selectedID will be the id to be filter, in your example '0'
     });
  }

你的ng-repeat将改为

<div ng-repeat="stock_available in getFilteredList">

我认为最好让DB为你订购。 但您可以尝试使用AngularJS orderBy或过滤器

 var module = angular.module('MyApp', []); module.controller('MyController', function($scope){ $scope.list = [ { 'id': 0, 'count': 10 }, { 'id': 1, 'count': 9 }, { 'id': 2, 'count': 8 }]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="MyApp"> <div ng-controller="MyController"> <div ng-repeat="member in list | orderBy:'-count'"> {{member.id}} </div> <hr> <div ng-repeat="member in list | filter: {id:0}"> {{member.id}} </div> <hr> <div ng-repeat="member in list | orderBy: '-count' | filter: {id : '!0'}"> {{member.id}} </div> </div> </div> 

我还建议使用db查询来提供元素的排序。 但是，我们并不总是有权更改后端或其运行方式。

所以......

我建议在设置$scope.customers之前使用sort函数转换响应数据

$http.get('config/get/getCustomers.php', { cache: true }).then(function (response) {
        var temp = response.data.customers.customer;
        temp.sort(fucntion (item1, item2) {
            if (item1.product === item2.product) {
                if (item1.size === item2.size) {
                    return item1.color > item2.color;
                }
                return item1.size > item2.size;
            }
            return item1.product > item2.product;
        }
        $scope.customers = temp
 });