I have an array where I am displaying a loader everytime you interact with any item on the array. The issue I have, is that if you have 7 elements on that array, you will see the loader on every single element, and I don't want that, I need to display the loader only in the element[index] you are interacting with
$scope.showLLoader = function() {
_.each($scope.lineItems, function(lines) {
_.each(lines, function(line, index) {
//HERE I NEED TO DISPLAY THE LOADER
console.log(line, index);
$scope.displayLoader = true;
$timeout(function() {$scope.linesLoader = false;}, 300);
});
});
}
template
<div>
<div class="row">
<div>
<div ng-repeat="lineItem in lineItems">
<div ng-repeat="lineLeague in lineItem | filter:search">
<div>
<div>
<div>
<span ng-show="linesLoader" class="pull-right"><div class="spinner"></div></span>
</div>
</div>
</div>
<table>
<tbody ng-repeat="line in lineLeague | filter:search">
<tr>
<td>
<span ng-bind-html="::line.gameName"></span>
</td>
</tr>
<tr ng-repeat="row in line.rows">
<td>
{{::line.gameDateMonth}}
</td>
<td>{{::row.nss}}</td>
<td><span>{{::row.name}}</span></td>
<td>
<a>
<span ng-hide="row.noSpread">{{::row.spread.spread}} ({{::row.spread.moneyLine}})</span>
</a>
<a href="javascript:void(0);" ng-show="row.spreadAvailable"
ng-click="addLineToBetSlip(line, row, 'spread')">
<span ng-hide="row.noSpread">{{::row.spread.spread}}</span>
</a>
</td>
<td>
<a>
<span>{{::row.total.type}}</span>
</a>
<a ng-click="addLineToBetSlip(line, row, 'total')">
<span>{{::row.total.type}}</span>
</a>
</td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
If I've understood you right, you want a loader to appear in whatever sell a user clicks on. If so then it sounds like you need to create a model for each cell which can be toggled true or false if the user clicks on it.
Thinking about it you could probably rework this with some sort of nested directive arrangement but if this is what you're aiming for the following implementation should give you a decent starting point. Hope it helps.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.linesLoader = true;
$scope.lineItems = [
[
[
{
gameDateMonth: 'June',
gameName: 'Foo Game',
rows: [
{
nss: 'nss1',
name: 'name1',
noSpread: false,
total: {
type: 'tType',
},
spread: {
spread: 'spread1',
moneyLine: 'mLine',
spreadAvailabel: true
},
showLoader: true
},
{
nss: 'nss2',
name: 'name2',
noSpread: false,
total: {
type: 'tType2',
},
spread: {
spread: 'spread2',
moneyLine: 'mLine2',
spreadAvailabel: true
},
showLoader: true
}
]
}
]
],
[
],
[
]
];
$scope.showCoords = {
rowIndex: 0,
cellIndex: 0
};
var rowcount = $scope.lineItems[0][0][0].rows.length,
cellcount = 5;
$scope.cellLoaders = createCellLoaderModels(2, cellcount);
$scope.showLoaderAt = showLoaderAt;
function showLoaderAt(rowIndex, key){
$scope.showCoords = {
rowIndex: rowIndex,
key: key
}
$scope.cellLoaders[rowIndex][key] = true;
$timeout(function(){
$scope.cellLoaders[rowIndex][key] = false;
}, 300);
}
function createCellLoaderModels(rowcount, cellcount){
var i, j,
cellLoaders = [];
for(i = 0; i < rowcount; i++){
cellLoaders[i] = [];
for(j = 0; j < cellcount; j++){
cellLoaders[i][j] = false;
}
}
return cellLoaders;
}
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<div class="row">
<div>
<div ng-repeat="lineItem in lineItems">
<div ng-repeat="lineLeague in lineItem | filter:search">
<div>
<div>
<div>
<span ng-show="linesLoader" class="pull-right"><div class="spinner"></div></span>
</div>
</div>
</div>
<table>
<tbody ng-repeat="line in lineLeague | filter:search" >
<tr>
<td>
<span ng-bind-html="::line.gameName">{{line.gameName}}</span>
</td>
</tr>
<tr ng-repeat="row in line.rows" ng-init="rowIndex = $index">
<td ng-click="showLoaderAt(rowIndex, 0)">
<span ng-show="cellLoaders[rowIndex][0]">**loading**</span>
{{::line.gameDateMonth}}
</td>
<td ng-click="showLoaderAt(rowIndex, 1)">
<span ng-show="cellLoaders[rowIndex][1]">**loading**</span>
<span>{{::row.nss}}</span>
</td>
<td ng-click="showLoaderAt(rowIndex, 2)">
<span ng-show="cellLoaders[rowIndex][2]">**loading**</span>
<span>{{::row.name}}</span>
</td>
<td ng-click="showLoaderAt(rowIndex, 3)">
<span ng-show="cellLoaders[rowIndex][3]">**loading**</span>
<a>
<span ng-hide="row.noSpread">{{::row.spread.spread}} ({{::row.spread.moneyLine}})</span>
</a>
<a href="javascript:void(0);" ng-show="row.spreadAvailable"
ng-click="addLineToBetSlip(line, row, 'spread')">
<span ng-hide="row.noSpread">{{::row.spread.spread}}</span>
</a>
</td>
<td ng-click="showLoaderAt(rowIndex, 4)">
<span ng-show="cellLoaders[rowIndex][4]">**loading**</span>
<a>
<span>{{::row.total.type}}</span>
</a>
<a ng-click="addLineToBetSlip(line, row, 'total')">
<span>{{::row.total.type}}</span>
</a>
</td>
<!-- </td> -->
</tr>
</tbody>
</table>
<pre>{{showCoords}}</pre>
<hr>
<pre>{{cellLoaders}}</pre>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I did a directive and used for every single element and each call server. If you need Ajax interaction.
Inject a controller with services to the directive.