AngularJS nested ng-repeats with nested bindings - javascript

I am trying to make an entirely dynamic angularJS page in such a way that the data-model and header-column-model can be passed in as JSON format and the angular/view can decode everything no matter how many columns, etc.
I have everything (Column Headers, single-Column sorting, multi-Column textbox filtering) working except the data portion where it looks like I want to nest {{bindings}}.
The idea is something like this:
<tr ng-repeat="item in model | filter:filters | orderBy:predicate:reverse">
<td ng-repeat="header in headers">{{{{$parent.item}}.{{header.colName}}}}</td>
</tr>
So that it would resolve to item.column (which is how this is done normally/statically).
However, there doesn't seem to be any embedding/nesting allowed for the double-squiggle references; aka. the first '{{' matches with the first '}}' automatically.
Is there a [good] way to do this?

Try using $eval:
<tr ng-repeat="item in model | filter:filters | orderBy:predicate:reverse">
<td ng-repeat="header in headers">{{$eval('item.' + header.colName}}</td>
</tr>
Here is a plunker showing that concept:
http://plnkr.co/edit/msGuMCCj477jyUAqjChz?p=preview

Related

How do I display an array / object using ng-repeat

I have an array that looks like the following:
I want to display that using angularJS ng-repeat, showing both count and value for each.
This is currently the HTML and angular I have but nothing displays.
I also don't need to display the 0 index in the array, I want to start from 1 if possible.
<tr ng-class="" ng-repeat="x in vm.data | filter: searchArray">
<td>{{x.value}}</td>
<td>{{x.count}}</td>
</tr>
I went back to the basics and understood that an ng-repeat is just a loop in javascript, and what do you need to do if you want to access data in JavaScript if your array is multi-dimensional? well you do a nested for loop, and thats exactly what I'm doing in this case.
This is the updated html/angularjs that displays the data I need:
<tbody>
<tr ng-repeat="x in vm.data">
<td ng-repeat="y in x">{{y.value}} {{y.count}}</td>
</tr>
</tbody>
Thank you guys again!

AngularJS iterating through a multi-layered array with ng-repeat

I have an issue with the ng-repeat directive when it comes to iterating through an array with multiple layers. Much like a Json object but not quite.
To build the array I use code akin to this:
$scope.dailyData = []
$scope.dailyData[0] = []
$scope.dailyData[0].push([{"today":null,"day2":1,"day3":null,"day4":null,"day5":null,"day6":null,"day7":null,"title":"Queries Built","id":null}])
This is just a sample of what the program actually does, and I do it this way for a specific reason that may or may not be relevant to the question.
This outputs to an array that looks like this.
[[[{"title":"Queries Built","today":null,"day2":1,"day3":null,"day4":null,"id":null}]]]
There are three arrays and an object in the middle. The problem is I can't seem to get the ng-repeat to pull the data from the object.
I want it to output like this:
| Title | Today | Yesterday |
| Queries Built | null | 1 |
But everything I've tried on ng-repeat doesn't seem to work. One such example:
<div ng-repeat="row in dailyData[0]">
<tr>
<td>{{row[0]["title"]}}</td>
<td>{{row["today"]}}</td>
<td>{{row["day2"]}}</td>
<td>{{row["day3"]}}</td>
<td>{{row["day4"]}}</td>
</tr>
</div>
The first row in here is a different method from the others, neither of them works.
Here's a fiddle: https://jsfiddle.net/rms9dv8j/2/
The main problem is that you used a <DIV> tag in the middle of the table, which is probably why the browser didn't render anything.
In this fiddle:
https://jsfiddle.net/5ox7Ledw/
<div ng-repeat="row in dailyData[0][0]">
<tr>
<td>{{row[0]["title"]}}</td>
I simplified the data and moved the ng-repeat into the TR element, while also deleting the erroneous DIV
<tr ng-repeat="row in dailyData">
<td>{{row.title}}</td>
I think you need to restructure your data so that it is in a better format.
You will need to do a nested loop similar to what I've done in this plnkr: http://plnkr.co/edit/CqUHwj?p=info
<div ng-app="module" ng-controller="ctrl">
<div ng-repeat="row in array">
{{row.name}}
<div ng-repeat="row2 in row.array2">
{{row2.name}}
</div>
</div>
</div>
More helpful information can be found in this post:
Nested ng-repeat

angular-translate multiple keys in one element

In my application I am pulling translations keys from a single cell in a database table and displaying them dynamically in a setting page. Most will only have one key in the display object but there will be a number of entries that would have multiple.
Is there a way in angular-translate to have one element host multiple keys and translate them?
en.json={"title1":"balance","title2":"other stuff"}
ctrl.list=[{display:"title1 title2"}]
<tbody class="validation-table-body">
<tr ng-repeat="entry in ctrl.list">
<td class="validation-name" >
{{entry.display | translate}}
</td>
</tr>
</tbody>
displayed:
<td>title1 title2</td>
expected:
<td>balance other stuff</td>
I am just trying to get this to work before trying to add a comma or something to display.
This is possible in the translate directive at least:
<ANY translate="{{toBeInterpolated}}"></ANY>
toBeInterpolated is the name of the key to be looked up.
Ref:https://angular-translate.github.io/docs/#/guide/05_using-translate-directive

AngularJS filter on multiple deep nested properties

I've couple of select fields on basis of which I want to filter data. Here is working plukr: http://plnkr.co/edit/VUnAoL2Sl0IqGcZqHbbi?p=preview
If I select any one value from select, it works fine, but when I select the other one it don't show any data.
These filters are going to be dynamic (depending on number of columns) So I want that in HTML I could use it with single filter declaration like: <tr ng-repeat="row in data | filter:{columns: filt}">
Not like: <tr ng-repeat="row in data | filter:{columns: filt.something} | filter: {some: thing}">
<tr ng-repeat="row in _data = (data | filter:{columns: {dealType:filt.dealType}}) | filter:{columns:{primaryUse:filt.primaryUse}}">
<td ng-repeat="column in row.columns">
{{column[column.header]}}
</td>
</tr>
I have got the same issue and it worked with a change in your code as above. Thanks

ng-if only deletes innerHTML in my table

I am making a custom directive which will paginate and make my table sortable. I am trying to make it so that multiple data types will work with the sorting with no effort from the user. Here is my problematic html in my templateUrl:
<tr ng-repeat="row in cndPaginatedObject track by $index">
<td ng-repeat="data in row track by $index" ng-if="!isValidDate(row[cndTableHeaders[$index]])">
{{row[cndTableHeaders[$index]]}}
</td>
<td ng-repeat="data in row track by $index" ng-if="isValidDate(row[cndTableHeaders[$index]])">
{{row[cndTableHeaders[$index]] | date: cndDateFormat}}
</td>
</tr>
I would prefer to use ng-if as opposed to ng-show/hide because it would unnecessarily duplicate DOM elements with ng-show/hide and just not show them. I have tried both ways, but I get the same result either way. The content of columns with dates in them don't show up, but the td itself is still there taking up space. So, I end up having three headers for columns and more than three columns. As far as I was aware, ng-if is supposed to remove the entire element from the DOM.
here is my other code of significance:
scope.isValidDate = (data) => {
var timestamp = Date.parse(data);
return !(isNaN(timestamp));
}
As for cndPaginatedObject, it is just an array of objects with multiple strings contained within. Thank you for any help in advance!
UPDATE:
Just thought I would also add that the cndTableHeaders is literally the table headers. cndPaginatedObject uses the table headers as the keys to each of the values. This way they show up in the proper order in the table.
Two ways to do what you're doing better without the need to produce extra doms and looping a ng-repeat twice
A better way to do what you want to do is
<tr ng-repeat="row in cndPaginatedObject track by $index">
<td ng-repeat="data in row track by $index">
{{(!isValidDate(row[cndTableHeaders[$index]])) ? row[cndTableHeaders[$index]] : row[cndTableHeaders[$index]] | date: cndDateFormat}}
</td>
</tr>
Or add a span inside the with the ng-if logic
<tr ng-repeat="row in cndPaginatedObject track by $index">
<td ng-repeat="data in row track by $index"">
<span ng-if="!isValidDate(row[cndTableHeaders[$index]])>
{{row[cndTableHeaders[$index]]}}
</span>
<span ng-if="isValidDate(row[cndTableHeaders[$index]])">
{{row[cndTableHeaders[$index]] | date: cndDateFormat}}
</span>
</td>
</tr>
Alternatively you could create your own filter which checks if date is valid and then using the date filter to filter it.

Categories