I have nested the ligne_commandes under the commandes using ng-repeat to get only the command lines of every command and I used ng-if to verify this. My problem is that I'm getting all the command line . Here is my code:
<td ng-repeat="commande in vm.commandes track by commande.id">
<tr ng-repeat="ligne_commande in vm.ligne_commandes track by ligne_commande.id">
<div ng-if="ligne_commande.commande_id == commande.id ">
<td> {{ligne_commande.id}} </td> </div>
</tr>
</td>
Any suggestion would be appreciated
Related
Simple question but i unable to find why in this template, the format-property directive can not access to device?
<table>
<tr ng-repeat="device in devices">
<format-property ng-repeat="property in properties"></format-property>
</tr>
</table>
althought with this template it works:
<table>
<tr ng-repeat="device in devices">
<td ng-repeat="property in properties">
<format-property></format-property>
</td>
</tr>
</table>
I tried scope.device and scope.$parent.device without success.
Here my demo
Edit
I can access to property but not to device. Unlike this question, i have a nested ng-repeat
Here a new demo with an isolated scope
see plunker
I think you must add td inside tr or you can use div.
Also you can check this link for more details.
So, in my object index I'm working inside a ng-repeat.
Now, when I click on an object, it should go to its matching id.
How would I do this with Angular?
I got something like this now:
<tr ng-repeat="dossier in dossiers">
<td>
#{{dossier.license_plate}}
</td>
</tr>
Why don't you try ngHref directive
<tr ng-repeat="dossier in dossiers">
<td>
<a ng-href="/dossiers/{{dossier.id}}">#{{dossier.license_plate}}</a>
</td>
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
https://docs.angularjs.org/api/ng/directive/ngHref
There is an array of objects. I sort out of its loop.
In both series to get a link to the image?
vm.data.list- array of object.
Loop:
<tr ng-repeat="item in vm.data.list">
<td ng-bind="item.temp.day"></td>
<td ng-bind="vm.symbal"></td>
<td ng-bind-template="{{ item.humidity }} %"></td>
</tr>
As in the cycle of getting links to the image? (http://openweathermap.org/img/w/vm.data.list[0].weather[0].icon.png, http://openweathermap.org/img/w/vm.data.list[1].weather[0].icon.png and other)
I tried to do so:
<tr ng-repeat="item in vm.data.list">
<td ng-bind="item.temp.day"></td>
<td ng-bind="vm.symbal"></td>
<td ng-bind-template="{{ item.humidity }} %"></td>
<!-- <td img ng-src="http://openweathermap.org/img/w/{{item.weather[0].icon.png}}">-->
<td> <img src=http://openweathermap.org/img/w/{{item}}.weather[0].icon.png></td>
</tr>
you need to use ng-src instead of src: https://docs.angularjs.org/api/ng/directive/ngSrc. Angular will first compute the ng-src value and then construct the src for you.
Here is a basic example: jsfiddle:
<div ng-repeat="item in items">
<img ng-src="http://www.w3schools.com/{{item.f.folders[0]}}/{{item.name}}">
</div>
In your case, use :
<img ng-src="http://openweathermap.org/img/w{{item.weather[0].icon}}.png">
Aside from the ng-src, be aware that:
an url beginning with something else than a protocol or a slash is relative: it will be resolved against the context of the current page. In your case, don't forget the http:// at the beginning !
all the angular expression inside the link should be inside the brackets: {{item}}.weather[0] won't work
I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.
I'm trying to do a table (with a lot of data) with Angular, the table is already done with PHP but to add a filter is easier using Angular. PHP takes 10secs to draw the entire table of 11k rows, but Angular keeps going on and on, even Firefox tells me that a script is unasnwered. If I click continue, the message is shown again, if I click cancel the page does nothing, if I press debug it continues running but nothing is shown.
At first, I thought that drawing +11k rows in HTML with the ng-repeat was too much and that was causing the problem, so I added a limitTo (50) and also added a infinite scroll div. But it's still not showing anything and keeps on loading.
Here is some code:
<div ng-app='mainApp'>
<div ng-init='values=[".$angularString."]' ng-controller='seeTickets as tickets'>
<div infinite-scroll='tickets.loadMore()' infinite-scroll-distance='1'>
Filtro: <input type='text' ng-model='globalSearch.$'/><br><br>
<script type='text/javascript'>
var app = angular.module('mainApp', []);
app.controller('seeTickets', function(){
this.totalDisplayed = 50;
this.loadMore = function(){
this.totalDisplayed += 50;
}
});
</script>
<table>
<tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed">
<td> {{value.id_ticket}} </td>
<td> {{value.ticket_date}} </td>
<td> {{value.ticket_subject}} </td>
<td> {{value.ticket_from}} </td>
<td> {{value.ticket_to}} </td>
<td> {{value.ticket_priority}} </td>
</tr>
</table>
</div>
</div>
</div>
Am I doing something wrong? Is there a way to work this out? Why it's keep on loading even if I set limitTo?
Add track by $index to ng-repeat like this:
<tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed track by $index">
...
</tr>