I'm trying to create a filter inside an ng-repeat. What i'm trying to achieve is a list -> more information on button click combination. I'm using the prestashop webservice for retrieving data. All the data is pulled from a json object.
So i did try some other solutions found on stack but sadly those didn't work for me. See the following example:
So my html exists of 2 blocks. One is a list of all orders, shortly summarized by id, date and the total payed amount. The other block would be the more information section. This section would show wich products were ordered, at what date, etc.
So i've created the list and made the div (each list item) a clickable element by adding ng-click. (yes i did also try a <button ng-click="function()"> but since it didn't made any difference between using the div or the button i've chosen for the div (layout).
So the onclick event grabs the order.id and adds it to a filter. This filter is then applied on the second "more information" block. This block should then filter this id and only grab that information. But thats where i've stranded since this part is still not working. So what i've tried so far is shown below:
My HTML
var myApp = angular.module('myApp',['ngRoute','cgNotify','pascalprecht.translate','ngCookies','ngSanitize']);
// Orders
myApp.controller('OrderController', function($scope, $http){
$http.get('config/get/getOrders.php').then(function(response){
$scope.orders = response.data.orders.order
});
$scope.currentOrder = {
"id": 3
};
console.log($scope.currentOrder);
$scope.showOrder = function(order) {
var order_id = order.id;
$scope.currentOrder = {
"id": parseInt(order_id)
};
console.log($scope.currentOrder);
return $scope.currentOrder;
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- The list -->
<div class="col-lg-12" ng-controller="OrderController">
<div class="container">
<form class="defaultinput col-xl-5 col-lg-6 col-md-8 d-flex justify-content-start">
<svg class="align-self-center d-flex" height="20px" version="1.1" viewbox="7 5 20 20" width="20px" xmlns="http://www.w3.org/2000/svg">
<defs></defs>
<path d="M27,23.5376923 L20.7969231,17.3046154 C21.7538462,16.0192308 22.3276923,14.4292308 22.3276923,12.7007692 C22.3276923,8.44769231 18.8969231,5 14.6638462,5 C10.4307692,5 7,8.44769231 7,12.7007692 C7,16.9538462 10.4307692,20.4015385 14.6638462,20.4015385 C16.4084615,20.4015385 18.0123077,19.8092308 19.3,18.8223077 L25.4476923,25 L27,23.5376923 L27,23.5376923 Z M8.35846154,12.7007692 C8.35846154,9.20692308 11.1869231,6.36461538 14.6638462,6.36461538 C18.1407692,6.36461538 20.9692308,9.20692308 20.9692308,12.7007692 C20.9692308,16.1946154 18.1407692,19.0369231 14.6638462,19.0369231 C11.1869231,19.0369231 8.35846154,16.1946154 8.35846154,12.7007692 L8.35846154,12.7007692 Z" fill="#8E8E93" fill-rule="evenodd" id="Search-Icon" stroke="none"></path></svg>
<input class="form-control" placeholder="{{ 'Zoeken' | translate }}" type="text">
</form>
<div class="row listrow" ng-repeat="order in orders">
<div ng-click="showOrder(order)" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3">
<p type="number" ng-bind="order.id" ng-value="order.id"></p>
</div>
<div class="col-lg-4">
<p ng-bind="order.invoice_date"></p>
</div>
<div class="col-lg-5">
<p ng-bind="order.total_paid_real"></p>
</div>
</div>
</div>
</div>
</div>
<!-- The more information block -->
<div class="col-lg-11" ng-controller="OrderController">
<div>
<div ng-repeat="order in orders | filter: currentOrder" class="text-center margin-t-10">
<div class="row listrow"></div>
<h1>{{ 'Totaal' | translate }}</h1><h1 ng-bind="order.id"></h1>
<h3>#010 - {{ 'Contant' | translate }} {{ 'Betaald' | translate }}</h3>
</div>
<div class="row listrow margin-t-20 no-border">
<div class="col-6">
Blauw shirt - Maat: L
</div>
<div class="col-1">
2x
</div>
<div class="col-5 text-right">
€ 200,00
</div>
</div>
<div class="row listrow no-border">
<div class="col-6">
Blauw shirt - Maat: L
</div>
<div class="col-1">
2x
</div>
<div class="col-5 text-right">
€ 200,00
</div>
</div>
<div class="row margin-t-30 justify-content-end">
<div class="col-6">
<div class="row">
<div class="col-6">
{{ 'Subtotaal' | translate }}
</div>
<div class="col-6 text-right">
€ 400,00
</div>
</div>
<div class="row listrow">
<div class="col-6">
21% {{ 'BTW' | translate }}
</div>
<div class="col-6 text-right">
€ 84,00
</div>
</div>
<div class="row">
<div class="col-5 padding-r-5">
{{ 'Totaal' | translate }}
</div>
<div class="col-3 align-self-center no-padding">
<h6>(2 items)</h6>
</div>
<div class="col-4 padding-l-0 text-right">
€ 484,00
</div>
</div>
</div>
</div>
</div>
<div class="row margin-t-100 d-flex justify-content-around">
<button ng-click="" type="button" class="smallbutton defaultbutton">{{ 'Print bon' | translate }}</button>
<a href="#/refund">
<button type="button" class="smallbutton defaultbutton">{{ 'Retour' | translate }}</button>
</a>
</div>
</div>The JSON example
{"orders":{"order":[{"id":"1","id_address_delivery":"4","id_address_invoice":"4","id_cart":"1","id_currency":"1","id_lang":"1","id_customer":"1","id_carrier":"2","current_state":"5","module":"ps_checkpayment","invoice_number":"4","invoice_date":"2017-03-16 15:18:27","delivery_number":"4","delivery_date":"2017-03-16 15:18:27","valid":"1","date_add":"2017-03-16 14:36:24","date_upd":"2017-03-16 15:18:27","shipping_number":{"@attributes":{"notFilterable":"true"}},"id_shop_group":"1","id_shop":"1","secure_key":"b44a6d9efd7a0076a0fbce6b15eaf3b1","payment":"Payment by check","recyclable":"0","gift":"0","gift_message":{},"mobile_theme":"0","total_discounts":"0.000000","total_discounts_tax_incl":"0.000000","total_discounts_tax_excl":"0.000000","total_paid":"55.000000","total_paid_tax_incl":"55.000000","total_paid_tax_excl":"55.000000","total_paid_real":"55.000000","total_products":"53.000000","total_products_wt":"53.000000","total_shipping":"2.000000","total_shipping_tax_incl":"2.000000","total_shipping_tax_excl":"2.000000","carrier_tax_rate":"0.000","total_wrapping":"0.000000","total_wrapping_tax_incl":"0.000000","total_wrapping_tax_excl":"0.000000","round_mode":"0","round_type":"0","conversion_rate":"1.000000","reference":"XKBKNABJK","associations":{"order_rows":{"@attributes":{"nodeType":"order_row","virtualEntity":"true"},"order_row":[{"id":"1","product_id":"2","product_attribute_id":"10","product_quantity":"1","product_name":"Blouse - Color : White, Size : M","product_reference":"demo_2","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"26.999852","unit_price_tax_incl":"27.000000","unit_price_tax_excl":"27.000000"},{"id":"2","product_id":"3","product_attribute_id":"13","product_quantity":"1","product_name":"Printed Dress - Color : Orange, Size : S","product_reference":"demo_3","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"25.999852","unit_price_tax_incl":"26.000000","unit_price_tax_excl":"26.000000"}]}}},{"id":"2","id_address_delivery":"4","id_address_invoice":"4","id_cart":"2","id_currency":"1","id_lang":"1","id_customer":"1","id_carrier":"2","current_state":"5","module":"ps_checkpayment","invoice_number":"3","invoice_date":"2017-03-16 15:18:27","delivery_number":"3","delivery_date":"2017-03-16 15:18:27","valid":"1","date_add":"2017-03-16 14:36:24","date_upd":"2017-03-16 15:18:27","shipping_number":{"@attributes":{"notFilterable":"true"}},"id_shop_group":"1","id_shop":"1","secure_key":"b44a6d9efd7a0076a0fbce6b15eaf3b1","payment":"Payment by check","recyclable":"0","gift":"0","gift_message":{},"mobile_theme":"0","total_discounts":"0.000000","total_discounts_tax_incl":"0.000000","total_discounts_tax_excl":"0.000000","total_paid":"75.900000","total_paid_tax_incl":"75.900000","total_paid_tax_excl":"75.900000","total_paid_real":"75.900000","total_products":"73.900000","total_products_wt":"73.900000","total_shipping":"2.000000","total_shipping_tax_incl":"2.000000","total_shipping_tax_excl":"2.000000","carrier_tax_rate":"0.000","total_wrapping":"0.000000","total_wrapping_tax_incl":"0.000000","total_wrapping_tax_excl":"0.000000","round_mode":"0","round_type":"0","conversion_rate":"1.000000","reference":"OHSATSERP","associations":{"order_rows":{"@attributes":{"nodeType":"order_row","virtualEntity":"true"},"order_row":[{"id":"3","product_id":"2","product_attribute_id":"10","product_quantity":"1","product_name":"Blouse - Color : White, Size : M","product_reference":"demo_2","product_ean13":{},"product_isbn":{},"product_upc":{},"product_price":"26.999852","unit_price_tax_incl":"27.000000","unit_price_tax_excl":"27.000000"}
To make it easier i've also created a JSfiddle
So my question is, since the first set of the filter is working (3). Why isn't my on click function working? with the console.log() i checked if the id is selected and it is. So why isn't the filter updated?
If you have any questions please ask them as comments.
As always, Thanks in advance!