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.
Related
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);
})
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
I want to use ng-repeat more or less as follows:
<div ng-repeat="One_Entry in Entries_List track by One_Entry.Entry_ID"
onClick="DoSomething(One_Entry.Entry_ID)">
<!---
present various fields within "One_Entry"
-->
</div>
Entries_List is a JSON array of objects, being Entry_ID one of the elements within the object.
DoSomething is a function within the related controller that is supposed to perform a specific activity on the structure whose ID is the passed Entry_ID.
I tried using $index as well as $parent.$index but I'm getting an error stating that these variable do not exist.
Could anyone tell me how I can achieve the above functionality?
Thanks.
The object One_Entry is scoped. Therefore onclick won't work. Use ng-click instead which is the Angular version for onclick:
<div ng-repeat="One_Entry in Entries_List track by One_Entry.Entry_ID"
ng-click="DoSomething(One_Entry.Entry_ID)">
<!---
present various fields within "One_Entry"
-->
</div>
It's not OnClick it's ng-click
Change
From :
<div ng-repeat="One_Entry in Entries_List track by One_Entry.Entry_ID"
onClick="DoSomething(One_Entry.Entry_ID)">
To:
<div ng-repeat="One_Entry in Entries_List track by One_Entry.Entry_ID"
ng-click="DoSomething(One_Entry.Entry_ID)">
I tried get a value from both dynamic objects in angular js
<div ng-controller="SampleController">
<div> {{item['111']['price']}}
</div>
inside SampleController
$scope.item={111:{price:"232"},112:{price:"233"},115:{price:"237"}};
right now I put item['111']['price'] statically. if when i receive the value dynamically from some where else how to that.
Like,
<div ng-controller="SampleController">
<div> {{item[{{ItemId['id']}}]['price']}}
</div>
$scope.ItemId={id:111};
$scope.item={111:{price:"232"},112:{price:"233"},115:{price:"237"}};
But its returning error. I tried with route scope also.Any one please help out.
Try this:
<div>{{item[ItemId.id].price}}</div>
I have a view that takes data from JSON, uses that data to populate a list of buttons (with basic information about the data) and then upon clicking the button, I want another panel to be populated with the data bound to the data in the button.
<div ng-controller="QueueCtrl">
<ul class="list-unstyled" ng-repeat="ticket in tickets">
<li><div data-queue-item></div></li>
</ul>
</div>
This part populates the list with each list item containing the ticket information I want displayed.
How do I select only the data for the ticket when I press its button to populate my other panel? For example, the next section on the page might be a button that will build an email to the person in the data: (haven't tested this code, please give me pointers if I'm doing it all wrong.
{{ ticket.email_address || "cannot find email address"}}
Problem is, I don't know how to tell it which ticket in tickets to reference...
Thanks!
Here is a working example, hope it will help you
http://plnkr.co/edit/7rAqx9nMBuzhdEAUQpZF?p=preview
You just need to use a reference
$scope.selectedTicket = {};
You can simply create a reference to the selected ticket in your scope. For example:
<div ng-controller="QueueCtrl">
<ul class="list-unstyled" ng-repeat="ticket in tickets">
<li ng-click="cont.selectedTicket = ticket"><div data-queue-item></div></li>
</ul>
</div>
And then in your panel below:
<div class="slected-ticket-info">
<div>{{cont.selectedTicket.someValue}}</div>
</div>
Where someValue is just some child key on your ticket object. Or as per your <a> example:
<a href="mailto:{{ cont.selectedTicket.email_address }}?...
Just make sure in your parent controller you create the container variable so the children can reference it:
$scope.cont = {};