I've tried searching for existing answers, but I could not find them.
I'd like to access an ArrayList from an object within an ArrayList, so:
Basically two classes: Glossary and Word.
Glossary contains a list with Word objects, the class Word contains a list with more Word objects (related words)
<table>
<span th:each="word : ${glossary.words}">
<td>
<tr th:each="relatedWord: ${word.relatedWords}">
<p th:text="${relatedWord.getName()}"></p>
</tr>
<td>
</span>
</table>
Unfortunately this does not work for me..
I'm not sure but I don't think you can access public non-static getters like you do (assuming getName() is marked as public).
You should try:
<table>
<span th:each="word : ${glossary.words}">
<td>
<tr th:each="relatedWord: ${word.relatedWords}">
<p th:text="${relatedWord.name}"></p>
</tr>
<td>
</span>
</table>
One note: the above code is absolutely not valid XHTML (span directly inside table, tr directly inside td).
Related
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
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.
If you take a look at my small code snippet below, what I'm trying to do should be pretty obvious....not every record has this field, so on the ones that don't I want to hide it and the label. What I have here did not work.
<table id="tablepress-1" class="tablepress tablepress-id-1" ng-repeat="agent in vm.agents | orderBy: 'id'" border="0">
<tbody class="row-hover">
<tr class="row-1 odd">
<td class="column-1"><img src="images\{{agent.image}}" alt="" class="aligncenter size-thumbnail wp-image-1116" data-recalc-dims="1" /></td>
<td class="column-2">
{{agent.name}}<br />
Phone: {{agent.phone}}<br />
<p ng-if="{{agent.email}} != ''">E-Mail: {{agent.email}}</p><br />
{{agent.bio}}
</td>
</tr>
</tbody>
</table>
How should I approach this?
Thanks,
newbie
What is given to the ngIf directive will be interpreted already, by being evaluated within the current scope. That is, you do not need to (in fact, you actually have not to) use the {{...}} marker here.
That is, simply using:
<p ng-if="agent.email != ''">E-Mail: {{agent.email}}</p>
... would do wonders. Although, since, when agent.email != '', then basically, agent.email is truth-y, being only evaluated to false in a boolean context if it is undefined or empty (or 0, but I believe that won't happen in your case).
What I'm trying to say is, simply use:
<p ng-if="agent.email">E-Mail: {{agent.email}}</p>
... and you're good to go!
I have a class structure as follows
data
TeamList[]
PlayerList[]
So what I have is a list inside a list. I want to be able to filter the TeamList with the value from a dropdown value, and iterate over the items in Player list as Rows. I am confident on the 2nd part with the following.
<table style="border: 1px ">
<tbody>
<tr>
<td>Player Name</td>
<td>Position</td>
<td>Projected Points</td>
</tr>
<tr ng:repeat="e in data.Team.Roster | orderBy: '-ProjectedPoints' " ">
<td>{{e.Name}}</td>
<td>{{e.Position.Abbreviation}}</td>
<td>{{e.ProjectedPoints}}</td>
</tr>
</tbody>
</table>
But I am not sure how to get the "Team" in the above case to be correct. Is this something you can do in Angular, or are you better doing it on the JS side and pass the correct team back to the $scope?
I'm using ui-bootstrap.collapse inside a table with dynamic data from a JSON API. Two of the multiple columns contain collapsed partials for each of its rows.
When I'm clicking on one of the icons to toggle that particular partial, every partial of the entire column open up.
Same issue when I'm trying to close the partial again - any of the icons work (not only the one of that particular partial).
I'm suspecting that I got to add a unique id or something like this to each of the partials to make one only that particular one pop up. But I'm not able to get this working.
Can any one point me in the right direction please?
Here is some of my code (I replaced the dynamic data with static data to make it simpler:
...
<tbody ng-repeat="url in urls">
<tr>
<td>{{url.url}}<span class="pull-right" ng-click="toggleUrl()">▼</span></td>
<td>{{url.title}}</td>
<td>{{url.traffic}}<span class="pull-right" ng-click="toggleTraffic()">▼</span></td>
</tr>
<!-- urlCollapsed -->
<tr collapse="!urlCollapsed">
<td colspan="4" style="background-color: pink">
</td>
</tr>
...
and a working plunker with the entire code: http://plnkr.co/edit/e4UldAFjjIr26Il73C88?p=preview
You need to pass url or some unique field to toggleUrl() method and then at the method make specific variable for each roe partial nd make them true. Accordingly you'll have to mak specific partial for each nd shoe them accordingly on ng-show.
Something like this
$scope.toggleUrl = function (url) {
if (url === '/1') {
$scope.url1Collapsed = !$scope.url1Collapsed;
} else {
$scope.urlCollapsed = !$scope.urlCollapsed;
}
};
and on page
<tr collapse="!url1Collapsed">
<td colspan="4" style="background-color: pink">partial 1</td>
</tr>
<tr collapse="!urlCollapsed">
<td colspan="4" style="background-color: pink"> partial 0</td>
</tr>