We Keep Coding

Creating a custom filter for ng-repeat

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!

i want to populate my edit form with the data of the selected item

<div class="section" ng-app="ShopMod" ng-controller="myShopsCtrl">
<a class="btn btn-primary btn-fill" href="/addshop">Add a new Shop</a>
<br>
<hr>
<div ng-init="getMyShops()">
<div class="row">
<div ng-repeat="shop in shops">
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<div class="front">
<div class="cover">
<img src="images/city.jpg" class="img-responsive"/>
</div>
<div class="user">
<img class="img-circle img-responsive" src="images/default-avatar.png"/>
</div>
<div class="content">
<div class="main">
<h3 class="name">{{shop.owner}}</h3>
<h5><i class="fa fa-map-marker fa-fw text-muted"></i> {{shop.address}}, {{shop.state}}</h5>
<h5><i class="fa fa-building-o fa-fw text-muted"></i> {{shop.contact}}</h5>
<h5><i class="fa fa-envelope-o fa-fw text-muted"></i> {{shop.email}}</h5>
</div>
<div class="footer">
<a href="/editshop/:{{shop.id}}">
Edit |
</a>
<a ng-click="manageShop(shop.id)">
Manage |
</a>
<a ng-click="editShop(shop.id)">
Delete
</a>
</div>
</div>
</div> <!-- end front panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div>
</div>
</div>
</div>
</div>
I'm new to sails and angular and i'm having an issue populating my edit form. I have a list of items, code is above. the user clicks the edit link and it takes them to a page,code is below, that will be populated with the data of that selected item.
<div class="section" ng-app="ShopMod" ng-controller="editShopCtrl">
<div class="header text-center">
<h2 style="text-decoration: underline">Edit Shop</h2>
</div>
<div class="content">
<form ng-submit="updateShop()">
<div class="form-group">
<label for="name">Shop Name</label>
<input type="text" class="form-control" ng-model="name" value="{{shop.name}}">
</div>
<div class="form-group">
<label for="address">Shop Address</label>
<input type="text" class="form-control" ng-model="address" value="{{shop.address}}">
</div>
<div class="form-group col-md-6">
<label for="contact">Phone Number</label>
<input type="tel" class="form-control" ng-model="contact" value="{{shop.contact}}">
</div>
<div class="form-group col-md-6">
<label for="email">Shop Email</label>
<input type="email" class="form-control" ng-model="email" value="{{shop.email}}">
</div>
<div class="form-group col-md-6">
<label for="email">State</label>
<select class="form-control" ng-model="state" value="{{shop.state}}">
<option>Lagos</option>
<option>Abuja</option>
</select>
</div>
<div class="col-md-8">
<button type="submit" class="btn btn-fill btn-info">Update Shop</button>
</div>
</form>
</div>
</div>
I know how to get the id of the selected item, and pass it to my back-end controller, my issue is sending that data back from my back-end controller to my form which is basically another view.Below is my function for getting the id from the url,finding the corresponding data and returning it.
editShop:function (req, res)
{
var id = req.param('id');
Shops.findOne({id:id},
function (err, shop)
{
if(err)
{
return res.negotiate(err);
}
return res.send(shop.data)
})
}
Below is the code for how i'm handling the routing
'GET /editshop/:id':{
view:'Shops/editShop',
locals: {
layout: '/Dashboard/layout-admin',
}
}
i would like to know how to go about dealing with this situation.

According to your scenario on click you want to load another page with edit layout. Ejs lets you bind the data you want at backend And so that you can send the data after bind.
But i do it different way.
SAVE All Detail to localStorage of the browser
I am completing only some of your code you can easily see where and what you should do.....
angular.module('ShopMod', [])
.controller('myShopsCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.getMyShops = function (id) {
$http.get('/shops?id=' + id)
.then(function (res) {
if (Array === res.data.constructor)//if res.data is array
$scope.shop = res.data[0];
else //res.data is object.
$scope.shop = res.data;
localStorage.setItem('myShop', JSON.stringify($scope.shop));
}, function (err) {
$scope.shop = {};
console.log(err);
});
}
}]);
In the above...
GET request is made at lcalhost:1337/shops?id=43 (Let shop id is
43).which is a blueprint route(sails make it for you by default
for rapid development).
$scope.shop is initialized with res.data and the same is saved in browsers localStorage by key myShop.Which you can access anytime.(you can see local storage in developer console Resources).
So all you have to do is to load the edit page.
<div class="footer">
<a href="/editshop/">
Edit |
</a>
<a ng-click="manageShop(shop.id)">
Manage |
</a>
<a ng-click="editShop(shop.id)">
Delete
</a>
</div>
Back-end Route for loading edit template.
'GET /editshop/':{
view:'Shops/editShop',
locals: {
layout: '/Dashboard/layout-admin',
}
}
In your edit template.
make ng-init="initializeForm()" at top.
and write controller function.
angular.module('ShopMod', [])
.controller('editShopCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.getMyShops = function (id) {
$scope.shop=JSON.parse(localStorage.myShop);
}
}]);
Putting data from localStorage to current $scope.shop...
This is how i do!I hope it will work for you!

Need ng-repeat filter to ignore any hyperlink string values when filtering view

I trying to filter an ng-repeat view of multiple item titles wrapped in hyperlinks but am getting results based on the Title and the URL string value.
How can I limit my filter to only the text of the Title and omit positives in the URL? E.g. If I search for "email" I would get results for items that have "email" in their title or text body but I would also get results that have "email" in their URL string.
Search Google for email<p>Blah blah blah</p>
Any help is greatly appreciated!
<div ng-app="Home">
<div ng-controller="Details">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4">
<div class="searchBox">
<input type="search" ng-model="search"/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" ng-repeat="SectionItem in Sections" ng-init="filterResult=[]" ng-hide="filterResult[$parent.$index].length <= 0">
<div class="panel panel-default">
<div class="panel-body">
<div>
<h1>{{SectionItem.Title}}</h1>
</div>
<div>
<!-- BEGIN: items belonging to this section -->
<table class="table table-condensed table-hover">
<tr ng-repeat="item in (filterResult[$parent.$index] = (SectionItems | filter:search | filterByMatchingSection:SectionItem.Title)) ">
<td>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" ng-show="item.Title != null">
{{item.Title}}
<p>
{{item.TextBody}}
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
<!-- END: items belonging to this section -->
</div>
</div>
</div>
</div>
</div>
</div>

This should do the trick
<input type="search" ng-model="search.Title"/>

According to the docs you can use a pattern object expression. For your case this should work:
... | filter: { title: search } | ...
This will search only in the title property.

How to initialize dynamic fields generated with a ng-repeat?

If I have in my view this html code, generated dinamically with ng-repeat:
<div ng-repeat="item in selectedProcedures track by $index">
<span style="display:none;">{{item.id}}</span>
<div class="row" ng-repeat="item2 in item.serviceComposite.designators">
<div class="col-sm-10 col-md-10 col-xl-10">
<div>
<button ng-click="hidePartBindings{{$parent.$index}} = !hidePartBindings{{$parent.$index}}" style="background: none; border: 0; float:left; text-align:center; margin-right: 5px;"><img src="./css/themes/parsek/img/layout/caret-blue.svg"/></button>
<span id="serviceComposite{{$parent.$index}}">{{ item2.extension }}</span>
</div>
<div class="row" id="partBindings{{$parent.$index}}" ng-repeat="item4 in item.serviceComposite.partBindings" ng-show="hidePartBindings{{$parent.$index}} === false">
<div ng-repeat="item5 in item4.part.designators">
<span class="col-sm-12 col-md-12 col-xl-12">
<a style="margin-left: 3rem;" href="#item-information" class="lightbox2" ng-click="checkIfIsModified({{item5.id}}, $event)">{{ item5.extension }}</a>
</span>
</div>
</div>
</div>
</div>
</div>
How can I initialize all generated hidePartBindings{{$parent.$index}} to true in my controller?
Thanks in advance.

You could also consider a controller for each instance of your repeated item. Of course, it would not be the best thing to do if you have hundreds of items.
<div class="row" ng-repeat="item2 in item.serviceComposite.designators" ng-controller="ItemController">
If you had fewer items and wanted to go down the route of a controller for each item, it would be a simple case of setting item.hideParts = true in your item controller.

Angular UI Bootstrap Slider Multiple items per slide

I am connecting to a web service and want to populate A UI Bootstrap carousel with 4 items for each slide. I am using | limitTo:4, but I need a way to limit 4 per slide out of the 10 total.
Here is the HTML
<div class="row event-slider" ng-controller="eventsController">
<div ng-controller="sliderController">
<carousel interval="interval" class="col-sm-12">
<slide class="col-sm-12">
<div class="col-sm-3 event" ng-repeat="event in eventData | limitTo:4">
<div class="event-inner">
<img ng-src="{{event.image.block250.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.title}}</h4>
<!-- {{event.}} -->
</div>
</div>
</div>
</slide>
</carousel>
</div>
</div>
Controller for reference
app.controller("eventsController", function($scope, $http) {
var events = $http.get('/events');
events.success(function(data) {
$scope.eventData = data.events["event"];
console.log($scope.eventData);
});
});
There is probably an easy solution that Im missing using a ng-repeat filter. Thanks a bunch for the help.
UPDATE: I am not accounting for responsive, but will need to at a later time(agile sprint). Still wrapping my mind around the += in the loop, but its working well. I think I am starting on the 4th item and going up from there... Thanks again for your help.
var events = $http.get('/events');
var i;
events.success(function(data) {
$scope.eventData = data.events["event"];
$scope.slideGroup = [];
for (i = 0; i < $scope.eventData.length; i += 4) {
slides = {
'first' : $scope.eventData[i],
'second' : $scope.eventData[i + 1],
'third' : $scope.eventData[i + 2],
'fourth' : $scope.eventData[i + 3]
};
console.log($scope.slideGroup);
$scope.slideGroup.push(slides);
}
});
HTML:
<carousel interval="interval" class="col-sm-12">
<slide class="col-sm-12" ng-repeat="event in slideGroup">
<div class="col-sm-3 event">
<div class="event-inner">
<img ng-src="{{event.first.image.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.first.title}}</h4>
</div>
</div>
</div>
<div class="col-sm-3 event">
<div class="event-inner">
<img ng-src="{{event.second.image.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.second.title}}</h4>
</div>
</div>
</div>
<div class="col-sm-3 event">
<div class="event-inner">
<img ng-src="{{event.third.image.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.third.title}}</h4>
</div>
</div>
</div>
<div class="col-sm-3 event">
<div class="event-inner">
<img ng-src="{{event.fourth.image.url}}">
<div class="event-details">
<h4 class="uppercase">{{event.fourth.title}}</h4>
</div>
</div>
</div>
</slide>
</carousel>

I tried this one that has been responsively designedin some way to render different number of items depending on screen resolution.
http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview