我有一个关于ng-repeat中过滤的问题。但这不是一个简单的问题,因为我并没有真正的问题需要解决。在这种情况下,我正在寻找最好的可能答案,它不需要很多代码,但仍然可以按照我想要的方式运行。在我的描述中会更清楚。
简短介绍:
所以我现在正在做一个购物应用程序。购物应用通过网络服务API与现有的PrestaShop网店连接。PrestaShop的REST API。因此,在创建了客户部分,产品部分和购物车系统后,我希望能够更新应用程序中每个产品的“库存量”。很多人会告诉我:这很简单,只需创建一个表单,其中包含数据库中的ng-repeat响应数据,以及在按钮ng-click
事件上更新股票的可能性。
好吧,我已经做到了,但现在是棘手的部分,为了解释,我将提供一些不太重要的例子来更清楚地说明我的问题:
Prestashop数据库
Prestashop数据库是一个拥有超过250个表的数据库。在这些表中有通过id和属性id的各种连接。一些简单的例子是:
customer
表有一个id_address
行,它连接到address
表。在此表中,所有“customersaddress info is placed. So far, let's say updating a customer I've created a combination of update the
customertable with the
customer_idbut also update the
addresstable where the
address_idis equal to the
id_addressfrom the selected
customerwithin the
customer”表。
1.产品也有一些链接表。想想价格、税收、尺寸和颜色。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,并以一种比使用许多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.产品ID 1:然后是所有尺寸、颜色等。
1.产品编号2:然后是所有尺寸、颜色等。
是的,写50个不同的ng-if
语句是可能的,但我想问的是,是否有更好、更容易、更充分的方法来做到这一点?
可以在here中找到伪代码的简单构建
一如既往
先谢谢你了!
5条答案
按热度按时间5f0d552i1#
您是否考虑过使用数据库并让DB为此屏幕生成一个特定的查询,该查询将所有产品组合在一行中?.
因此,您当前有一堆“重复的”产品ID(因为查询返回颜色和大小的详细信息),但需要对单个记录进行操作。
您可以在后端使用GROUP BY SQL查询语句来完成此操作。
如果端点正在被更多的程序使用,只需将您的端点设置为“仅用于此屏幕”并应用必要的更改。
如果在后端更改SQL太复杂(或政治上不可行),您可以始终使用javascript group_:
https://www.consolelog.io/group-by-in-javascript
group_by将数据集和列(即)作为输入。
给定一个数据集,如:
这意味着您可以将分组的数据集反馈到网格程序中,这样它就可以通过先迭代组然后再迭代项来将组显示为组,将项显示为项。
有很多方法可以实现group_by,比如:
What is the most efficient method to groupby on a javascript array of objects?
高温加热
u0njafvf2#
也许您应该问问自己,应用程序的哪个部分负责对这些属性进行排序。这可能会给你带来一个更明显的解决方案。如果责任归于API,那么您的请求或API应该为您的WebApp返回一个现成的JSON。如果责任转到前端WebApp,则在js代码或模板中执行。
我的猜测是你的API应该这样做,在这种情况下,我可能不是最好的顾问。但是如果你决定在WebApp中这样做,我绝对认为你不应该使用ngIf来做这件事,而是在你的JS中构建纯函数来构建一个或几个数组,你将能够在你的模板中使用不太多的函数代码。
例如,你可以.map()你的响应并返回一个良好的可迭代对象,和/或用.concat()或其他方法链接它。如果您需要构建此类函数的想法,请查看以下示例http://reactivex.io/learnrx/
zrfyljdw3#
通过阅读您的问题,我建议您不要使用
ng-if
n次,您可以在控制器中使用以下逻辑进行过滤:您的
ng-repeat
将更改为o2gm4chl4#
我觉得你最好让DB帮你订购。但是你可以尝试AngularJS orderBy或filter
fumotvh35#
我还建议使用db查询来提供元素的排序。然而,我们并不总是能够更改后端或它的功能。
所以...
我建议在设置
$scope.customers
之前使用一个sort函数来转换响应数据