Develop Reference

Handlebars lookup to make an href

I am trying to make a mod on an existing app. All I want to do is create an href that contains a url, but using the handlebars lookup function. When I try it just returns a blank value.
Here is my function:
var cardLink = function generateCardLink() {
var url = `"url/container-scan-reports/${vendor}/${product}/${image}"`
return url;
}
//...
res.render('vendor', {
title: 'Vendor Images',
images: images,
tags: tags,
cardLink: cardLink
});
I am then trying to pass in href this way on the top div of template.
<div class="row row-cards-pf ">
{{#each images}}
<div href={{lookup ../cardLink #index }} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
<div class="card-pf-body">
<div class="card-pf-top-element">
<span class="pficon-image card-pf-icon-circle"></span>
</div>
<h2 class="card-pf-title text-center">
{{ this }}
</h2>
<div class="card-pf-items text-center">
<div class="card-pf-item">
{{{ lookup ../tags #index}}}
</div>
</div>
<!-- <p class="card-pf-info text-center"><strong>Most recent image</strong> {{ lookup ../mostRecentImages #index}}</p> -->
</div>
<div class="card-pf-view-checkbox">
<input type="checkbox">
</div>
</div>
</div><!-- /col -->
{{/each}}
Can anyone help me?

You don't need lookup in this case. I think you want to display the url, so #index is not the right reference. Try it this way:
<div href={{../cardLink}} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

Algolia - Refactor code for multiple indices search with autocomplete.js

I'm looking to bridge multiple indices leveraging autocomplete.js. I found this tutorial very helpful. My issue is what happens when I have a lot more that two indices to search?
Currently in our project we'll have over 30 different indices that will need to be searched. Obviously, simply copy 'n paste code over-and-over again is horrible thing to do, but I can't figure out any other way to make this work then just doing that.
Is there another way of doing things that would normalize my code?
Here is an example of it. Just imagine that there are another 28 indices in this example. You can see that it's out of control quickly.
A working JSFiddle can be found here
var client = algoliasearch('9G2RUKPPGE', '8860a74c330efaf0119818fcdd800126');
var SPR = client.initIndex('dev-SPR');
var SWG_SPR = client.initIndex('dev-SWG_SPR');
//initialize autocomplete on search input (ID selector must match)
$('#aa-search-input').autocomplete({ hint: false }, [
{
source: $.fn.autocomplete.sources.hits(SPR, {
hitsPerPage: 15
}),
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
const markup = `
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 nopadding">
<img src="${suggestion.image}" alt="" class="algolia-thumb">
</div>
<div class="col-xs-11 col-sm-11 col-md-11">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-8">
<span>${suggestion._highlightResult.code.value}</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<span>Available Qty: ${suggestion.quantityAvailable.toLocaleString()}</span>
</div>
</div>
<div class="row hidden-xs">
<div class="col">
<span>${suggestion.description}</span>
</div>
</div>
</div>
</div>`;
return '<div class="algolia-result">' + markup + '</div>';
},
empty: function(options) {
return '<div class="algolia-result"><span>No results were found with your current selection.</span></div>';
},
}
},
{
source: $.fn.autocomplete.sources.hits(SWG_SPR, {
hitsPerPage: 15
}),
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
const markup = `
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 nopadding">
<img src="${suggestion.image}" alt="" class="algolia-thumb">
</div>
<div class="col-xs-11 col-sm-11 col-md-11">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-8">
<span>${suggestion._highlightResult.code.value}</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<span>Available Qty: ${suggestion.quantityAvailable.toLocaleString()}</span>
</div>
</div>
<div class="row hidden-xs">
<div class="col">
<span>${suggestion.description}</span>
</div>
</div>
</div>
</div>`;
return '<div class="algolia-result">' + markup + '</div>';
},
empty: function(options) {
return '<div class="algolia-result"><span>No results were found with your current selection.</span></div>';
},
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
window.location.href = window.location.origin + '/' + suggestion.url
});

This line:
$('#aa-search-input').autocomplete({ hint: false }, [] ...
last parameter is an array. Why can't you have a function which given array of the client indexes would do all these client.initIndex('dev-SPR') and then generate an array with all of the objects you have to deal with now?
Call that function with ['dev-SPR','dev-SWG_SPR' ...]
So you end up with:
`$('#aa-search-input').autocomplete({ hint: false }, myNewFn(['dev-SPR','dev-SWG_SPR']))`
Unless something else is different in those objects other than the client indexes ...

Attach and Remove a CSS class using ngClass in Angular JS

I am building an app using Angular JS. I am using ng-repeat to loop over list of items. My code is something like below,
<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id); active = true; " ng-class="{'blue_act': active}">
<div class="con_cir col-lg-2 col-md-2 col-sm-2">
<div class="grey_cir">
<div class="wht_cir">
<div class="circle1">
<div class="cir_txt">{{room.title | nameInitials}}</div>
</div>
</div>
</div>
</div>
<div class="em_info col-lg-10 col-md-10 col-sm-10">
<div class="em_pr">
<div class="name boldfnt col-lg-7 col-md-7 col-sm-7" ng-class="{'normal-font': active}">
{{room.title}}
</div>
<div class="date col-lg-5 col-md-5 col-sm-5">
{{room.lastActivity | date: 'd/M/yyyy'}}
</div>
</div>
<div class="subject boldfnt col-lg-12 col-md-12 col-sm-12">
Here is your copy of your coupans.
</div>
</div>
</div>
Now I want to apply the class blue_act only when the particular row is selected. I don't want to write any function in the controller to achieve this.
For example When I click the Demo#16 only that row will have the blue background. And when I click the e2Spark only that row will be highlighted using the blue color. Is it possible with only ng-click and ng-class?
Screenshot

Create a new property on controller's scope, called 'selectedRow', and assign room name to it on click.
plnkr
var app = angular.module('plunker', []);
app.controller('MainCtrl', function() {
this.rooms = [
{name: 'room1'},
{name: 'room2'},
{name: 'room3'},
];
this.selectedRow = this.rooms[0].name;
});
.blue_act {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl as main">
selected row: {{main.selectedRow}}
<div class="names" ng-repeat="room in main.rooms" ng-click="main.selectedRow = room.name" ng-class="{'blue_act': main.selectedRow == room.name}">
<div class="con_cir col-lg-2 col-md-2 col-sm-2">
<div class="grey_cir">
<div class="wht_cir">
<div class="circle1">
<div class="cir_txt">{{room.name }}</div>
</div>
</div>
</div>
</div>
</div>
</body>

Replace your click event with this ng-click="getMessages(room.id); reset(); room.active = true; "
and do same for ng-class where you are using as like ng-class="{'normal-font': room.active}"
Add below reset function in your code if you want select at a time single row.
$scope.reset= function(){
angular.forEach($scope.rooms, function(room) {
room.active=false;
});
}

in your ng-click
ng-click="getMessages(room.id); room.active = !room.active;"
in your ng-class
ng-class="{'normal-font': room.active }"

With no controller function you could use
<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id);room.active=!room.active;" ng-class="{'blue_act': room.active}">
...
</div>
Or if you just wanted to have one active at the same time this should work:
<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id);selectedRoom=room.id;" ng-class="{'blue_act': selectedRoom===room.id}">
...
</div>

How i can correctly append div in pagination table

i have that div. It's ok!
<div class="product"><div class="product-list-td col-xs-12 col-sm-12" ng-repeat="products in showProduct">
<div class="numeric-prod col-xs-12 col-sm-2">
{{$index+1}}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.name }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.article }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.description }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.cost }}
</div>
<div class="col-xs-12 col-sm-2"">
<button type="button" class="btn btn-warning delete-product col-xs-12 col-sm-12" data-ng-click="deleteProduct( products.id )">Delete</button>
</div>
</div></div>
i'm try add that div after ng-repeat function. He work. (that code)
$scope.productClick = function (event) {
if ($scope.testId != event)
{
$scope.testId = event;
if ($scope.testId != undefined)
{
$scope.productTableName = $filter('filter')($scope.ShopTable, {id: $scope.testId}, true);
$scope.showProduct = $filter('filter')($scope.ProductTable, {shop_id: $scope.testId}, true);
$('.product').appendTo('#'+event);
$('.tr-table .product').css({'display' : 'block'});
if ($scope.showProduct[0]== undefined)
{
$scope.ProductsShopName = 'No Products';
}
else
{
$scope.ProductsShopName = $scope.productTableName[0].name+' product list';
}
}
} else {
$scope.testId = 0 ;
$('.tr-table .product').css({'display' : 'none'});
$('.product').appendTo('.container');
}
}
Why do I ask - after moving to a new page (dir pagination angularjs), the div added to me in the .tr-table Automatically deleted.
You can see how it happens here http://point.salesdep.by/
Click the button "product" (once), then go to the next page of the table. And click button "product" again. ("not work") because div '.product' removed from the first page. Help please guys!

It would be easier to do it the angular way. Update you parent div (the ng-repeat shops) and add your div with a boolean to display it or not:
<div class="row dragger">....</div>
<div class="product" data-ng-show="shop.showList">
<div class="product-list-td col-xs-12 col-sm-12" ng-repeat="products in shop.showProduct">
<div class="numeric-prod col-xs-12 col-sm-2">
{{$index+1}}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.name }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.article }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.description }}
</div>
<div class="col-xs-12 col-sm-2">
{{ products.cost }}
</div>
<div class="col-xs-12 col-sm-2"">
<button type="button" class="btn btn-warning delete-product col-xs-12 col-sm-12" data-ng-click="deleteProduct( products.id )">Delete</button>
</div>
</div>
</div>
And update your controller accordingly (my response probably doesn't work, it's just to give you the main idea):
$scope.productClick = function (shop) {
//if you want to hide all other div, you can loop here over shops to
//set all showList at false
shop.showList = !shop.showList;
if(true === shop.showList){
//this part is probably false
//you need to fetch the data here so you can display it
$scope.testId = shop.id;
$scope.productTableName = $filter('filter')($scope.ShopTable, {id: $scope.testId}, true);
shop.showProduct = $filter('filter')($scope.ProductTable, {shop_id: $scope.testId}, true);
if (shop.showProduct[0]== undefined)
{
$scope.ProductsShopName = 'No Products';
}
else
{
$scope.ProductsShopName = $scope.productTableName[0].name+' product list';
}
}
}
}

Improve AngularJs ng-class Performance with lots of data

Im looking to improve the speed of ng-class or find and alternative way to do it, because it takes too long to load when it have to manage a lot of data.
Here is my code:
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate"
ng-repeat="build in buildsRunning.builds.build | limitTo:totalDisplayed track by build._id "
ng-hide="build.hide"
ng-class="{'running': build._running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}">
<div class="title-container animate" >
<p>{{::build._buildTypeId}}</p>
<p class="running-on">Running on: <span class="agent">{{::build.agent._name}}</span></p>
<p class="running-on">Version: <span class="agent">{{::build._number}}</span></p>
<p class="running-on" ng-if="::build.user._name">Run by: {{::build.user._name}}</p>
</div>
<div class="update-container animate col-xs-12">
<div class="progress progress-running">
<div class="progress-bar "
role="progressbar" aria-valuenow="{{build._percentageComplete}}" aria-valuemin="0"
aria-valuemax="100" style="width:{{build._percentageComplete}}%"
ng-class="{'progress-bar-success': build._percentageComplete > 5 ,'progress-bar-warning': build._percentageComplete <= 6}">
<span ng-if="build._percentageComplete > 5" class="sr-only"> {{build._percentageComplete}}% Completed
<p class="elapsed-time" ng-if="build._percentageComplete >= 50"> in : {{build.timeInfo}} Minutes</p>
</span>
</div>
</div>
</div>
</div>
Any ideas?
Sorry for my English, if you do not understand me or need more information, please let me know

As #pankajparkar pointed out, this will be caused by your rendering of, as you said,
a lot of data.
However, best practice is to call a controller function which returns the classes:
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate"
ng-repeat="build in buildsRunning.builds.build | limitTo:totalDisplayed track by build._id "
ng-hide="build.hide"
ng-class="getClasses(build)">
and in your controller:
$scope.getClasses = function(build) {
// return whatever you like based on build object
}