We Keep Coding

Add Attribute to an unshift item vuejs

I have two lists , user can drag items from list 1 to list 2 and there is a button with text input so user can add his own input to the list 2 which will be automatically updated in my MYSQL database using axios.
This is AddItem script
addItembh(){
var input = document.getElementById('itemFormbh');
if(input.value !== ''){
// this line makes a new article with input value but no attribute :(
this.tasksNotCompletedNew.unshift({
behv_skilldesc:input.value
});
axios.post('../joborder/addAttrib', {
behv_skilldesc: input.value,
type:'behvnew',
joborder_id: this.joborder_id ,
alljobs_id: this.alljobs_id
}).then((response) => {
console.log(response.data);
}).catch((error) => {
console.log(error);
});
input.value='';
}
},
To be clear on the question : I need to assign an attribute to my new article thats getting created so I can find the text of that attrib later on deleteItem method
UPDATE :
<template>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<section class="list">
<header>Drag or Add Row Here</header>
<draggable class="drag-area" :list="tasksNotCompletedNew" :options="{animation:200, group:'status',handle:'disabled'}" :element="'article'" #add="onAdd($event, false)" #change="update">
<article class="card" v-for="(task, index) in tasksNotCompletedNew" :key="task.prof_id" :data-id="task.prof_id" #change="onChange">
<span >
{{ task.prof_skilldesc }}
</span>
<span v-if="task.prof_skilldesc !== 'Drag Here'">
<button class="pull-left" #click="deleteItem(task.prof_id) + spliceit(index)" ><i class="fa fa-times inline"></i></button>
</span>
</article>
<article class="card" v-if="tasksNotCompletedNew == ''">
<span>
Drag Here
</span>
</article>
</draggable>
<div>
<input id='itemForm' />
<button v-on:click='addItem' class="btn btn-theme btn-success" style='margin-top:5px;' >Add a row </button>
</div>
</section>
</div>
<div class="col-md-4">
<section class="list">
<header>List of Skills ( Hold left click )</header>
<draggable class="drag-area" :list="tasksCompletedNew" :options="{animation:200, group:'status'}" :element="'article'" #add="onAdd($event, true)" #change="update">
<article class="card"
v-for="(task, index) in visibleskills"
:key="task.prof_id" :data-id="task.prof_id"
>
{{ task.prof_skilldesc }}
<div v-if="index == 4" style="display:none" >{{index2 = onChange(index)}}</div>
</article>
<pagination
v-bind:tasksCompletedNew ="tasksCompletedNew"
v-on:page:update ="updatePage"
v-bind:currentPage ="currentPage"
v-bind:pageSize="pageSize">
</pagination>
</draggable>
</section>
</div>
</div>
</template>
So on Add a row our method will be called .
Thanks for any help

Why value in directive does not get updated - Angular Js?

I just encounter a problem I have written a directive but its not getting update, I dont know why, in console it does change but in directive it does not.
Here is my directive
mainControllers.directive('mallsproduct', function () {
return {
restrict: 'E',
scope: {
productInfo: '=info',
linkid: '=linkid'
},
templateUrl: 'directives/dashboard_product.html'
};
});
Here is my `html`
<div class="aa-properties-content-body mg-7" ng-controller="DashboardController as ctrl">
<ul class="aa-properties-nav aa-list-view">
<li style="border: 1px solid #ccc;margin-bottom: 25px;" ng-repeat="active_products in productInfo.items">
<article class="aa-properties-item mg-top-0-notimp">
<a class="aa-properties-item-img" href="#/product/{{active_products.id}}">
<img ng-if="active_products.photos[0].path" resize-image alt="img" class="" src="{{active_products.photos[0].path}}">
<img ng-if="!active_products.photos[0].path" resize-image class="" src="img/default_product.jpg" alt="">
</a>
<div class="aa-properties-item-content">
<div class="aa-properties-about padding-0-notimp">
<h5>{{active_products.name| limitTo : 10}}{{active_products.name.length > 10 ? '...' : ''}}</h5>
<p class="font-size-11-imp"><i class="fa fa-building-o" aria-hidden="true"></i> {{active_products.mall.name| limitTo : 10}}{{active_products.mall.name.length > 10 ? '...' : ''}}</p>
<p class="font-size-11-imp"><i class="fa fa-map-marker" aria-hidden="true"></i> {{active_products.mall.address| limitTo : 10}}{{active_products.mall.address.length > 10 ? '...' : ''}}</p>
<p class="font-size-11-imp"><i class="fa fa-phone" aria-hidden="true"></i> {{active_products.shop.telephone}}</p>
<p class="font-size-11-imp" ng-if="linkid == 3"><i class="fa fa-eye" aria-hidden="true"></i> {{active_products.views}}</p>
<div class="modal-demo">
<script type="text/ng-template" id="myModalContent.html">
<div ng-include src="'partials/update_product.html'"></div>
</script>
<div ng-controller="AddProductController">
<button ng-click="view_product(active_products.id)"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button ng-click="del_product(active_products.id)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
<button ng-if="linkid == 2" ng-init="status = 1" ng-click="reactivate_product(active_products.id, status)"><i class="fa fa-lock" aria-hidden="true"></i></button>
</div>
<div class="modal-parent">
</div>
</div>
</div>
</div>
</article>
</li>
</ul>
<div class="aa-title pad-top-30" ng-if="linkid == 1">
<p>Global page count for active product is {{global_pagecount}} and active product count from API is {{productInfo._meta.pageCount}}</p>
<h3 ng-if="global_pagecount < productInfo._meta.pageCount" class="text-align-center color-feroz cursor-pointer" ng-click="load_more(global_pagecount, linkid)">{{$root.translated_labels.dashboard.load_more}}</h3>
</div>
<div class="aa-title pad-top-30" ng-if="linkid == 3">
<p>Global page count for most viewed is {{global_pagecount_mostv}} and most viewed count from API is {{productInfo._meta.pageCount}}</p>
<h3 ng-if="global_pagecount_mostv < productInfo._meta.pageCount" class="text-align-center color-feroz cursor-pointer" ng-click="load_more(global_pagecount_mostv, linkid)">{{$root.translated_labels.dashboard.load_more}}</h3>
</div>
</div>
I am including directive in dashboard partial like this
<div class="active tab-pane" ng-if="linkid === '1'">
<malls-product info="active_products" linkid="linkid"></malls-product>
</div>
<!--Active products list ends here -->
<!-- Get Inactive Products -->
<div class="active tab-pane" ng-if="linkid === '2'" >
<malls-product info="$root.inactive_products" linkid="linkid"></malls-product>
</div>
<!--Get Inactive products ends here -->
<div class="active tab-pane" ng-if="linkid === '3'" >
<malls-product info="$root.mostviewed_products" linkid="linkid"></malls-product>
</div>
<!-- View Profile-->
and This is the api which does show the result in console.
$scope.global_pagecount = 1;
$scope.active_product = function () {
$http.get($rootScope.baseurl + 'abc?&page=' + $scope.global_pagecount,
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token, 'Accept-Language': $cookies.get('type')}
})
.success(function (data) {
//$scope.active_product_pageCount = data._meta.pageCount;
if ($scope.global_pagecount === 1) //I know for sure the first page of pagination is 1
{
$scope.active_products = data;
}
if ($scope.global_pagecount > 1) // If user click load more global count gets incremented and new results push in active_producst
{
/* for loading new results Pagination Applied */
for (var times = data.items.length - 1; times >= 0; times--) {
$scope.active_products.items.push(data.items[times]);
}
}
console.log($scope.active_products);
})
.error(function (data) {
// console.log(data);
});
};
What is the issue, why it is not getting update, If I use rootscopethen it works fine, obviously it has too, but not with $scope.
Note : when scope.global_pagecount value is equal to 2 i get new results but not in directive only in console. By default scope.global_pagecount has value equal to 1.

You don't use your directive correctly. You define it as:
mainControllers.directive('mallsproduct'
Which means you should use it as:
<mallsproduct ..>
Or define your directive camelcased:
mainControllers.directive('mallsProduct'
Then you can use it as you do now:
<malls-product ..>

This is because of the Isolated scope doesn’t know anything about its parent scope. You just created a directive with an isolated scope.
To access any parent scope data, we need to pass the scope data to our directive explicitly. This is achieved by setting properties on the scope object in the DDO.
Another important thing is that, these properties also MUST be set as the attributes of the directive html element.

selecting elements javascript

I'm making a script that will notify you when someone is online on whatsapp web and i have this:
var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
console.log("online notification failed");
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
window.clearInterval(onlineCheck);
}
}
},1000);
now the problem is that i'm selecting an element by the class "emojitext ellipsify" th 19th and if someone texts me another element with the class "emojitext ellipsify" will be made and the 19th won't be the status anymore, so i want to know if i can select an element with the same method from css which is : element>element
like this (div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext ellipsify)
or any other possible way.
var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
console.log("online notification failed");
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
window.clearInterval(onlineCheck);
}
}
}, 1000);
<header class="pane-header pane-chat-header">
<div class="chat-avatar">
<div class="avatar icon-user-default" style="*somestyle*">
<div class="avatar-body">
<img src="*srcpath*" class="avatar-image is-loaded">
</div>
</div>
</div>
<div class="chat-body">
<div class="chat-main">
<h2 class="chat-title" dir="auto">
<span class="emojitext ellipsify" title="*person'sname*"><!-- react-text: 3216 -->*person'sname*<!-- /react-text --></span>
</h2>
</div>
<div class="chat-status ellipsify">
<span class="emojitext ellipsify" title="typing…"><!-- react-text: 3219 -->*the info that i need to get(typing…)*<!-- /react-text --></span>
</div>
</div>
<div class="pane-chat-controls">
<div class="menu menu-horizontal">
<div class="menu-item">
<button class="icon icon-search-alt" title="Search…"></button>
<span></span>
</div>
<div class="menu-item">
<button class="icon icon-clip" title="Attach"></button>
<span></span>
</div>
<div class="menu-item">
<button class="icon icon-menu" title="Menu"></button>
<span></span>
</div>
</div>
</div>
</header>

What you are looking for is document.querySelectorAll
With that function, you can select elements with a selector, the same used with css. So, you could do this:
document.querySelectorAll(".emojitext.ellipsify")
Or put a better selector, in order to get the desired elements, and not others.
Your example would be:
document.querySelectorAll("div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext.ellipsify")

You could use JQuery, much simpler
$('parent > child')
https://api.jquery.com/child-selector/

How to implement spinner in angularjs for every http request in my application

I need to implement spinner or loading image/css in angularjs in my applcation for every http request.Below are the code I Have currently have. I tried to implement it by putting ng-show on the top of my jsp but after that I am not able to see anything on the screen. Please help
home.jsp
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Background Check App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body ng-app="app" ng-controller="TabController as tab">
<div class="container-fluid" ng-controller="TableData">
<div class="row jumbotron" ng-controller="AppController" ng-include="'resources/templates/header.jsp'"></div>
<!-- <div class="row" ng-include="'templates/navigation.html'"></div> -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-7 tab" ng-include="'resources/templates/navigation.jsp'"></div>
<div class="col-md-1"></div>
<div class="col-md-3">
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" ng-model="query">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<!-- <button class="close">×</button> -->
</form>
</div>
</div>
<hr>
<div class="row" id="home" ng-show="tab.isSet(1)" ng-include="'resources/templates/homeData.jsp'"></div>
<!-- <toBe-Initiated ng-show="tab.isSet(2)"></toBe-Initiated> -->
<!-- <div class="row" ng-show="tab.isSet(2)" id="toBeInitiated" ng-include="'resources/templates/toBeInitiated.jsp'"></div> -->
<!-- <div class="row" ng-show="tab.isSet(3)" id="initiated" ng-include="'resources/templates/initiated.jsp'"></div>
<div class="row" ng-show="tab.isSet(4)" id="pending" ng-include="'resources/templates/pendingWithFadv.jsp'"></div>
<div class="row" ng-show="tab.isSet(5)" id="inProgress" ng-include="'resources/templates/inProgress.jsp'"></div>
<div class="row" ng-show="tab.isSet(6)" id="completed" ng-include="'resources/templates/completed.jsp'"></div>
<div class="row" ng-show="tab.isSet(7)" id="accessList" ng-include="'resources/templates/accessList.jsp'"></div>
<div class="row upload" ng-show="tab.isSet(8)" id="dataUpload" ng-include="'resources/templates/dataUpload.jsp'"></div>
<div class="row" ng-show="tab.isSet(9)" id="newMember" ng-include="'resources/templates/onBoard.jsp'"></div> -->
<div class="footer"></div>
</div>
<div ng-view></div>
<!--scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="resources/angular/angular.js"></script>
<!-- <script src="resources/angular/ui-bootstrap-tpls.js"></script> -->
<!-- <script src="resources/angular/ui-bootstrap.js"</script> -->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.0.js"</script>
<script src="http://urigo.github.io/angular-spinkit/javascripts/angular-spinkit.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="resources/angular/bootstrap-table-angular.js"></script>
<script src="resources/angular/bootstrap-table-all.js"></script>
<script src="resources/scripts/app.js"></script>
<script src="resources/scripts/loginValidate.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="resources/angular/angular-bootstrap-file-field.js"></script>
<!-- <script src="js/app.js"></script> -->
<!-- <script src="silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery.js"></script> -->
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="resources/angular/ng-file-upload/ng-file-upload-shim.js"></script> <!-- for no html5 browsers support -->
<script src="resources/angular/ng-file-upload/ng-file-upload.js"></script>
<script src='resources/angular/angular-upload.min.js'></script>
<script src="resources/angular/dirPagination.js"></script>
<script src="resources/angular/angular-route.js"></script>
<!--scripts -->
</body>
</html>
tobeInitiate.jsp
<!-- <div img src="resources/images/spinner.jpg" ng-show='loading'> -->
<div class="col-md-1" > </div>
<div class="col-md-10">
<!-- <input type="button" id="btnExport" value=" Export Table data into Excel " onclick="exportToExcel()" /> -->
<!-- <button type="submit" class="btn btn-primary" id="btnExport" onclick="exportToExcel()">Export to Excel</button> -->
<!-- <button class="btn btn-link" id="btnExport" > --> <!-- ng-click="exportToExcel('#toBeInitiatedData')"> -->
</span> Export to Excel
<!-- </button> -->
<div class="data" id="toBeInitiatedData" data-ng-controller="tobeinitiatedCtrl" data-ng-init="toBeInitiatedOnLoad()">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
Employee Id {{x.initiatedFor}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<table class="table table-hover table-condensed">
<thead>
<tr>
<!-- <th>S.No.</th> -->
<!-- <th>Employee ID</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpId'; sortReverse = !sortReverse" ng-model="initiatedFor">
Employee ID
<span ng-show="sortType == 'EmpId' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpId' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Employee Name</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpName'; sortReverse = !sortReverse" ng-model="empName">
Employee Name
<span ng-show="sortType == 'EmpName' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpName' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Requested By</th> -->
<th>
<a href="#" ng-click="sortType = 'ReqBy'; sortReverse = !sortReverse" ng-model="initiatedBy">
Requested By
<span ng-show="sortType == 'ReqBy' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqBy' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'ReqDateParsed'; sortReverse = !sortReverse" ng-model="requestedDate">
Requested Date
<span ng-show="sortType == 'ReqDateParsed' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqDateParsed' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>Review Data</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="x in names | orderBy:sortType:sortReverse | filter:query | itemsPerPage:10">
<!-- <td>{{x.SNo}}</td> -->
<td>{{x.initiatedFor}}</td>
<td>{{x.empName}}</td>
<td>{{x.initiatedBy}}</td>
<td>{{x.requestedDate | date: 'dd-MMM-yyyy'}}</td>
<td><button type="button" class="btn btn-link" ng-click="open(x)">View {{x.initiatedFor}}</button></td>
<td>
<select name="action" class="selectContainer actionSelect form-control" ng-model= "action"title="Select 1 action" width="50px">
<option value="resend">Resend</option>
<option value="initiate">Initiate</option>
</select>
</td>
<td><input type="checkbox" ng-model="confirmed" ng-click="toggleSelection(x,confirmed,initiate,initiatedFor)" value="{{x}}" /></td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
<button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button>
</div>
<div>
<!-- <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button> -->
</div>
</div>
<div class="col-md-1"> </div>
<!-- </div> --
app.js
(function() {
var app = angular.module('app', ['ui.bootstrap', 'ngFileUpload', 'bootstrap.fileField','angularUtils.directives.dirPagination','ui.router','ngRoute']);
app.controller('tobeinitiatedCtrl',['$scope','$http','$modal',function($scope, $http,$modal){
$scope.initiate=[];
$scope.names=[];
$scope.action='initiate';
//alert("tobeinitiated");
$scope.toBeInitiatedOnLoad = function(){
$scope.loading = true;
//alert($scope.id);
$http({
url: 'toBeInitiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
$scope.toggleSelection=function toggleSelection(x,conf,initiate,initiatedFor){
alert("change");
//$scope.initiate=[];
//var idx = $scope.names.indexOf(initiatedFor);
//alert(idx);
if (conf)
{
$scope.initiate.push(x);
//alert($scope.initiate[0].empName);
}
else
{
//var idx1 = initiate.indexOf(x.initiatedFor);
for (var i=0;i<initiate.length;i++)
{
if (angular.equals(initiate[i],x))
initiate.splice(i,1);
}
//alert("false");
}
};
$scope.resendIntitate = function(){
//$scope.name={};
var index = 0;
$scope.initiate.forEach(function (name) {
console.log('rows #' + (index++) + ': ' + JSON.stringify(name));
});
/*var data ={
initiatedFor : $scope.name.initiatedFor
}*/
alert(JSON.stringify($scope.initiate));
//alert(JSON.stringify($scope.initiate));
$http({
url: 'fromInitiated',
method: "POST",
data:JSON.stringify($scope.initiate),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
//$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
//$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
$scope.open = function open (size) {
//alert(x);
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size:size,
resolve:{
names:function(){
return $scope.names;
},
x:function(){
return size;
}
}
});
};
}]);;
})();

Well there are multiple solutions out there. One of the best we use is like YouTube loading bar.
Check this out. Let me know if this doesn't work for you. We've other solution.

Its easy to do without any components. But in my case the page i built up of several rest calls to a server. Different panels containing different stuff. If one panel fails in loading the other might succeed. No one like a big fat loader on thw whole page.
First I added a property in a utility service that I already had. I called it
loaders={}
Then I add an id the requestheader in all get,patch,post and delete that i do. ( I do something similar for server validation as well)
{headers: {'loader-id': 'account-panel'}}
In angularjs you can do stuff in the httpInterceptor. In every request intercept
I look for the header if its there I pick it upp and add it in the service.
ex: loaders[request.headers['loader-id']]=true;
In the interceptor i also intercept a successfull response and responseError, In these methods i set the loaders to false. ex:
if(response.config.headers['loader-id'])
{loaders[request.headers['loader-id']]=false;}
Finally I add in every panels header something like:
<div class='pull-left loader' ng-show='hasLoader('account-panel')'><i class='fa fa-spinner fa-spin'></i></div>
hasloader only checks the service loader property

'use strict';
angular
.module('myApp')
.factory(
'BusyLoader',
function(jQuery) {
var busyLoader = {};
busyLoader.count = 0;
busyLoader.ajaxIndicatorStart = function(text, isBackground) {
busyLoader.count++;
if(isBackground === undefined || isBackground === null){
isBackground = true;
}
if (jQuery('body').find('#resultLoading').attr('id') !== 'resultLoading') {
jQuery('body')
.append(
'<div id="resultLoading" style="display:none"><div><img src="images/ajax-loader.gif"><div id="lblResultLoading">'+ text+ '</div></div><div class="bg"></div></div>');
}
else{
jQuery("#lblResultLoading").text(text);
}
jQuery('#resultLoading').css({
'width' : '100%',
'height' : '100%',
'position' : 'fixed',
'z-index' : '10000000',
'top' : '0',
'left' : '0',
'right' : '0',
'bottom' : '0',
'margin' : 'auto'
});
if(isBackground){
jQuery('#resultLoading .bg').css({
'background' : '#000000',
'opacity' : '0.7',
'width' : '100%',
'height' : '100%',
'position' : 'absolute',
'top' : '0'
});
}
else{
jQuery('#resultLoading .bg').css({
'background' : '',
'opacity' : '',
'width' : '',
'height' : '',
'position' : '',
'top' : ''
});
}
jQuery('#resultLoading>div:first').css({
'width' : '250px',
'height' : '75px',
'text-align' : 'center',
'position' : 'fixed',
'top' : '0',
'left' : '0',
'right' : '0',
'bottom' : '0',
'margin' : 'auto',
'font-size' : '16px',
'z-index' : '10',
'color' : '#ffffff'
});
jQuery('#resultLoading .bg').height('100%');
jQuery('#resultLoading').fadeIn(300);
jQuery('body').css('cursor', 'wait');
};
busyLoader.ajaxIndicatorStop = function() {
busyLoader.count--;
if(busyLoader.count === 0){
jQuery('#resultLoading .bg').height('100%');
jQuery('#resultLoading').fadeOut(300);
jQuery('body').css('cursor', 'default');
}
};
return busyLoader;
});

How can I limit a forEach loop to iterate only 16 times

I want to limit the forEach loop to only show a maximum of 16 results. Is there a way I can achieve this?
<div class="events-list" data-bind="if: (typeof(Events) != 'undefined')" style="padding-top:5px; padding-bottom:5px;">
<div data-bind="foreach: Events">
<!-- ko if: StatusImage -->
<div data-bind="foreach: EventNames" style="margin-bottom:-6px;">
<article data-bind="attr:{class: OfferType== 'TM Event' ? 'TMEvents event-item smooth-hover1' : 'SpecialEvents event-item smooth-hover1'}" style="display:table">
<img src="http://placehold.it/131x70">
<div data-bind="attr:{class: OfferType== 'TM Event' ? 'btn-cell TMEvents' : 'btn-cell SpecialEvents'}" class="btn-cell" style="display:table-cell!important;">
<a style="width:233px; margin-bottom:2px;" target="_blank" data-bind="attr: {href: Ticket, class: OfferType && OfferType=='TM Event' ? 'button buy' : 'button view'}">
<span data-bind="text: OfferType && OfferType== 'TM Event' ? 'TICKET/EVENT INFO' : 'VIEW EVENT'"></span>
</a>
</div>
</article>
</div>
<!-- /ko -->
</div>

Using slice works:
<ul class="list-unstyled" data-bind="foreach: items.slice(0, 16)">
<li data-bind="text: number + ' '+ name"></li>
</ul>
Here is a Plunkr showing this.