How inject data after every certain count in angularjs - javascript

I have some SQL data which I am fetching from the database, I am using angular js with an ng-repeat directive to list all rows below is my code:
<div class="wrapper">
<div class="content" ng-repeat="row in rows">
{{row.someData}}
</div>
</div>
Now I have some custom advertisement banners which I want to show after every 4th row but I don't know how to it with angular Js so please help me here

Apart from Panos K's way what you can do is have one flag to check if banner data is received from web service and then add it after every 4th row of data already loaded. So, for that have ng-if condition inside ng-repeat & then bind that new bannerData arry/objects with index as $index/4.
Check below Plunker example I've created to demonstrate this. Click on Banner data button to make async call to get banner data & then binding it to existing data loaded using ng-repeat
<div ng-repeat="x in records track by $index">
<div class="column">{{x.name}}</div>
<div class="column">{{x.abbreviation}}</div>
<div ng-if="isBannerDataAvailable && ($index+1) % 4 === 0" class="banner">
<p>Banner After every 4th row</p>
<p> {{showBannerData($index)}} </p>
</div>
</div>
Where showBannerData() can be:
$scope.showBannerData = function($index) {
var index = $scope.Math.round(($index + 1) / 4) - 1;
return $scope.bannerData[index].Banner;
}
Working plunker Example

First edit your question with your last comment.
what you need to do is add banners to your model ($scope.rows in your case)
So when you fetch your banners (onSuccess) do this
banners.forEach((element,index)=>{
if(index%4==0)
$scope.rows.splice(index,0,element);
})

Related

How to load controller as per specific condition using Angular.js

I am facing some issue. I have some nested controller within one parent controller and I need it to execute as per some condition using Angular.js. I am explaining my code below.
NABH.html:
<div ng-controller=NABHParentController>
<div ng-show="showNabh">
<div ng-include="'nabh1.html'"></div>
</div>
<div ng-show="showNabh1">
<div ng-include="'nabh2.html'"></div>
</div>
</div>
nabh1.html:
<div class="right_panel" style="display:block;" id="auditnabh" ng-controller="NABHController">
<td class="sticky-cell" ng-click="initiateNABH(nabh.NABHAuditID)">
</td>
</div>
nabh2.html:
<div class="right_panel" ng-controller="NABH2Controller">
<h2 class="page-title">NABH (INT012017001)</h2>
<div>
NABHParentController.js:
var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
$scope.showNabh=true;
$scope.showNabh1=false;
})
NABHController.js:
var app=angular.module('demo');
app.controller('NABHController',function($scope,$http,$state,$window,$location,$filter,getBothIdToAuditDetailPage)
{
$scope.initiateNABH = function(aid) {
$scope.$parent.$parent.showNabh=false;
$scope.$parent.$parent.showNabh1=true;
}
})
Here Initially all controller are loading and nabh1.html is displaying first. When user will click on that td click event the second part html is showing. Here I need when user will click on that ng-click="initiateNABH(nabh.NABHAuditID)" the second view will open and the resepective controller will start execute. Initially only displaying view related controller will execute. Please help.
It sounds like using ng-if instead of ng-show will solve your problem:
<div ng-if="showNabh">
<div ng-include="'nabh1.html'"></div>
</div>
<div ng-if="showNabh1">
<div ng-include="'nabh2.html'"></div>
</div>
The difference is that while ng-show will "only" hide the element using css when the expression is falsy, ng-if will not create the element if it's falsy and as a result will not initiate the controller until ng-if is truthy.
Also, I would probably move the initiateNABH function to the parent controller - it will still be available in the child controller but makes the code less likely to break since you don't have to use $parent:
var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
$scope.showNabh=true;
$scope.showNabh1=false;
$scope.initiateNABH = function(aid) {
$scope.showNabh=false;
$scope.showNabh1=true;
}
})

Using ng-click to show divs in Angular js

So I have a link in an html box and when clicking the link iam trying to have it show a whole new set of divs replacing the present divs.
I tried :
<a href="" ng-click="Search('Show Products A B C')" > Show Products </a>
Search calls in the function in the controller which returns the data for the A B C products, which are then displayed using
<div ng-repeat="products in Search( 'Show Products A B C')" </div>
I am basically trying to do something like this:
<div ng-repeat=" href="" ng-click="Search('Show Products A B C')"> </div>
which is not proper syntax I understand.
But right now nothing happens.
Basically from that ng-click i would like to call that portion of the code (ng-repeat) because right now they are not connected.
thanks
ng-repeat will respond to changes in its argument, but your argument is a function Search(). I would suggest the following:
In your search function:
$scope.Search = function(arg) {
// do your search logic
$scope.productList = <search result list>
}
then in html
<div ng-repeat="products in productList" </div>
What you should do is to have some array or object A bound to $scope, then when you call search you update A and the changes will be reflected on your view
$scope.show=true;
$scope.products =[A,B,C];
$scope.Search = function() {
// do list update
$scope.show=false;
$scope.products =[D,E,F] ;
}
You also need to change ng-repeat to this:
<div ng-repeat="product in products" </div>
And add ng-show to the first link:
Click Me
Edit:
Check this fiddle for a working example.
Edit:
Fiddle updated reflecting latest changes.

Create html elements in ngRepeat depending on object properties

I have an array of objects that have two fileds for example :
var array = [{type:"range", group:"group1"}, {type:"boolean", group:"group1"},
{type:"input", group:"group3"}... ]
Now in HTML by iterating through the array I want to create a div for every different GROUP and put the all elements with that group inside. But by putting I mean creating Inputs or Radiobuttons or Dropdowns depending on the TYPE of the element.
Now I have done this using AngularJS and mostly JS by appending objects to existing ones and so on. But I want to reduce as much as possible the usage of js because I am having issue with calling a function after the HTML is loaded (Call function after HTML is loaded AngularJS).
So I will be thankfull if someone give me an advice how this should look like mostly in html. I imagine something like this :
<div ng-repeat="object in array track by $index">
//if object.group div exists add to existing one (check maybe with js function ?)
// if object.type is ... add ...
// else if objec.type is ... add ...
...
//else object.group not exists create div with id object.group for example
// if object.type is ... add ...
// else if object.type is ... add ...
...
This should work for your case:
<div ng-repeat="(key, value) in array | groupBy: 'group'">
Group: {{key}}
<div ng-repeat="object in value">
<div ng-switch on="object.type">
<div ng-switch-when="range">Range block</div>
<div ng-switch-when="boolean">Boolean block</div>
<div ng-switch-when="input">Input block</div>
</div>
</div>
<br>
</div>
First looping groups elements, second will work with an elements in a group

Check checkboxex based on values fron json using Angularjs

I have a simple html that loads JSON data into a table using Angularjs ng-repeat. One of the fields come as 1 or zero. I want to write a simple AngularJs directive that will show check-boxes as either checked(1) or not (0); and show text success against (1) and failure against(0) rows.
I'm starting with angular, you can use ng-model inside your ng-repeat and ng-if to display to decode value inside the loop.
Code:
<div ng-controller="Ctrl">
<div ng-repeat="o in obj">{{o.id}}
<input type="checkbox" ng-model="o.checked">
<div ng-if="o.checked == true">success</div>
<div ng-if="o.checked != true">fail!</div>
</div>
</div>
Demo: http://jsfiddle.net/IrvinDominin/G9m4H/

Angularjs appending templates to each other

how to append code to already existing <div ng-view> container.
like I have template with the following code:
<p>{{date}}</p>
<div ng-repeat='i in items'>
<span>{{i.created}}</span>
<span>{{i.order}}</span>
<span>{{i.customer}}</span>
</div>
then by ajax we loading next date items and so on..so how to make the templates to append in the end, not replace each other and look like:
2013-05-03
created
order
customer
created
order
customer
created
order
customer
2013-05-04
created
order
customer
2013-05-05
created
order
customer
created
order
customer
and so on..
?
thank you in advance.
You need to create a parent ng-repeat as follows:
<div ng-repeat="entry in invoices">
<p>{{entry.date}}</p>
<div ng-repeat='i in entry.items'>
<span>{{i.created}}</span>
<span>{{i.order}}</span>
<span>{{i.customer}}</span>
</div>
</div>
Thus, when your server is loading the next date items, simply add the same to invoices array.

Categories