After exploring various solutions on Stack Overflow to identify unique values in angular.js (I am still learning), I am faced with a challenge. My goal is to present these unique values within a select form and use them as filters for data displayed in a table.
In essence, I have a dataset that I want to showcase in a table. Within the table header, I aim to include a select dropdown containing unique values from a specific column in the data. This select dropdown should allow users to filter the displayed table based on their selections.
I have been attempting to implement the following code:
app.filter('unique', function () {
return function (collection, keyname) {
var output = [],
keys = []
found = [];
if (!keyname) {
angular.forEach(collection, function (row) {
var is_found = false;
angular.forEach(found, function (foundRow) {
if (foundRow == row) {
is_found = true;
}
});
if (is_found) { return; }
found.push(row);
output.push(row);
});
}
else {
angular.forEach(collection, function (row) {
var item = row[keyname];
if (item === null || item === undefined) return;
if (keys.indexOf(item) === -1) {
keys.push(item);
output.push(row);
}
});
}
return output;
};
});
Here is an example of my HTML structure:
<th> Number:
<br/>
<select ng-model="search.number"
ng-options="row.number for row in data | unique:'number'">
<option value=""> </option>
</select>
</th>
The table data itself is represented like this:
</tr>
</thead>
<tbody>
<tr ng-repeat="r in data | filter:{ number: search.number, }">
<td> {{r.number}}</td>
</tr>
</tbody>
</table>
Although the output works, the value does not set correctly leading to no matching rows when filtering (as 0,1,2,3.. do not correspond to any data rows).
<select ng-model="search.number"
ng-options="row.numberfor row in data | unique:'number'"
class="ng-pristine ng-valid">
<option value="" class=""> </option>
<option value="0">1023 456789</option>
<option value="1">1024 456789</option>
<option value="2">1025 456789</option>
<option value="3">1023 111999</option>
<option value="4">1024 111999</option>
</select>
Furthermore, I have explored an alternative unique function:
/*
app.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i][key]);
}
}
return uniqueList;
};
}); */
Unfortunately, modifying [key] in this line uniqueList.push(input[i][key]); was required to display values in the dropdown, but controlling the options' values remains an issue.
No errors are reported in the console.
While I have 10 columns/fields available for filtering, I have only demonstrated one here.
If anyone could provide guidance or suggestions, it would be greatly appreciated. Thank you.
Edit:
I came across a directive that might be helpful, although handling similar key-value pairs presents challenges. Is there a simpler approach?
app.directive('mySelect', [function () {
return {
restrict: 'E',
transclude: true,
replace: true,
template: '<select ng-options="key as value for (key, value) in myMap" ng-transclude></select>',
link: function postLink(scope, element) {
scope.myMap = {"1":"1","2":"2","3":"3"};
// e.g. hashmap from server
}
};