I am facing an issue with filtering data based on specific criteria in AngularJS. My requirement is to display all fields with filled data first, followed by fields with the value "-". However, since the filter is applied within ng-repeat, I am aware that running the filter only once is not possible due to AngularJS's 'dirty checking' mechanism.
'appStatusData'=
Data-A: "0.000"
Data-Date: "2014-09-07 00:00:00.0"
Data-B: "111"
Data-C: "-"
Data-D: "0517"
Data-E: "462.000"
Data-F: "-"
Data-G: "No"
Data-H: "-"
Desired Output:
Data-A: "0.000"
Data-Date: "2014-09-07 00:00:00.0"
Data-B: "111"
Data-D: "0517"
Data-E: "462.000"
Data-G: "No"
Data-C: "-"
Data-F: "-"
Data-H: "-"
<ion-view view-title="Application Status" name="permit-view">
<ion-header-bar class="bar-stable bar-subheader">
<div class="title" style="color: #2A4660"><u>Header</u></div>
</ion-header-bar>
<ion-content class="padding" has-subheader=true>
<ion-list>
<ion-item class="item" ng-repeat="(key, val) in (appStatusData | showDecimalData | showDataByNotNullFirst ) ">
<b>{{key}} </b> {{val}}
</ion-item>
</ion-list>
<button class="button button-full button-dark" ng-click="showList();">Show Details</button>
</ion-content>
Javascript: I have tried the following approach which is not yielding the desired results as 'present' and 'empty' arrays are coming up as undefined.
angular.module('myApp')
.filter('showDataByNotNullFirst', function($filter) {
return function(array) {
var present, empty, result;
//console.log('Key is: ' + key + ' Value is: ' + value);
$filter('filter')(array, function(key, val) {
if (val != '-') {
present[key] = val;
} else {
empty[key] = val;
}
});
result = present.concat(empty);
return result;
};
});
Could someone please assist me in resolving this issue or offer suggestions for a solution?