In the view, I have a table displaying nested data using ng-repeat. I want to show only rows with empty cells (<textarea>) when a link is clicked to apply a filter. The text of the link should change to 'Show all data' so that clicking it again will revert back to showing all data.
<a class="btn btn-primary" href="#" ng-click="view.applyMissingValuesFilter(view.missingValuesButtonText)">{{view.missingValuesButtonText}}</a>
<table class="table">
<tr>
<th>Resource Id</th>
<th ng-repeat="locale in view.resourceGridResources.Locales">
{{locale ? locale : "invariant" }}
</th>
</tr>
<tr ng-repeat="resource in view.resourceGridResources.Resources">
<td>{{resource.ResourceId}}</td>
<td ng-repeat="res in resource.Resources">
<textarea ng-model="res.Value"
ng-blur="view.saveGridResource(res)"
style="min-width: 300px"></textarea>
</td>
</tr>
</table>
I attempted the following logic in the controller to initially display rows with empty data:
vm.applyMissingValuesFilter = function (linktext) {
var results = [];
var temp = vm.resourceGridResources.Resources;
for (var i = 0; i < temp.length; i++) {
for (var j = 0; j < temp[i].resources.length; j++) {
if (temp[i].resources[j] === '') {
results.push(temp[i]);
}
}
}
console.log(results);
linktext === "Display Rows with missing data"
? vm.missingValuesButtonText = "Show all data"
: vm.missingValuesButtonText = "Display Rows with missing data";
};
An error occurred:
TypeError: Cannot read property 'length' of undefined
at listController.vm.applyMissingValuesFilter (listController.js:67)
at fn (eval at compile (angular.js:13275), <anonymous>:4:442)
at f (angular.js:23481)
at n.$eval (angular.js:15922)
at n.$apply (angular.js:16022)
at HTMLAnchorElement.<anonymous> (angular.js:23486)
at HTMLAnchorElement.dispatch (jquery.js:4430)
at HTMLAnchorElement.r.handle (jquery.js:4116)
If I simply do something like console.log(temp.length), it outputs the correct length.
Alternatively, is there a simpler way to achieve this? I thought about using regular expressions, such as
<td ng-repeat="res in resource.Resources" | match: ^$