I created a filter using AngularJS but I am experiencing some issues with displaying the information.
Although the filter is functioning correctly (you can verify by checking '$scope.showItems.length' which shows that it returns data), when I select the option "BUCURESTI" to display it using 'ng-repeat', no data is shown even though it exists in '$scope.showItems'.
Only when I choose the "Selectati judetul" option does the data appear.
Does anyone know where the problem lies?
Here is the Plnkr link: https://plnkr.co/edit/NYruIfo3GXLLmcs4jfpe?p=preview
HTML:
<body ng-app="salariesApp" ng-controller="mainCtrl" class="my-gray">
<div class="container" ng-controller="searchCtrl">
<table class="table table-bordered-top-bottom table-hover show-table">
<tr>
<td class="tableSearch"><input class="tableSearch spa-search8 form-control" type="text" id="inputName" ng-model="searchSal.den" /></td>
<td class="tableSearch">
<select class="tableSearch spa-search6 form-control" id="inputJudName" ng-model="searchSal.jud" ng-options="jud for jud in jduete"
ng-change="searching('jud')" >
<option value="">Selectați județul</option>
</select>
</td>
</tr>
<tr ng-repeat="rows in showItems | filter: searchSal">
<td>{{rows.den}}</td>
<td ng-show="false">{{rows.tip}}</td>
<td>{{rows.jud}}</td>
</tr>
</table>
<br/>
<input class="tableSearch spa-search8 form-control" type="text" ng-model="out" />
</div>
</body>
App & Services:
var app = angular.module('salariesApp', []);
app.factory('salServ', ['$http', 'appConst', function ($http, appConst) {
var showSal = {};
showSal.ddrm = appConst.defaultDiacriticsRemovalMap;
// Remove diacritics from strings
var changes;
showSal.removeDiacritics = function (str) {
if (!changes) {
changes = showSal.ddrm;
}
for (var i = 0; i < changes.length; i++) {
str = str.replace(changes[i].letters, changes[i].base);
}
return str;
}
return showSal;
}]);
Controllers:
app.controller('mainCtrl', ['$scope', '$window', 'appConst', 'salServ',
function($scope, $window, appConst, salServ) {
$scope.showSalTh = appConst.showSalTh;
$scope.jduete = appConst.judArr;
$scope.sectoare = appConst.sectArr;
$scope.showSal = appConst.salArr;
$scope.searchSal = {};
}]);
app.controller('searchCtrl', ['$scope', '$filter', 'appConst', 'salServ',
function($scope, $filter, appConst, salServ) {
$scope.out = "";
$scope.showItems = $scope.showSal;
$scope.searching = function(initParam) {
$scope.$watch('searchSal', function() {
if (initParam == 'jud') {
if ($scope.searchSal.jud == null) {
delete $scope.searchSal['jud'];
console.log('del');
}
var functionFilter = function (actual, expected) {
if (typeof actual === 'string') {
var cleanValue = salServ.removeDiacritics(actual).toLowerCase();
var searchCleanText = salServ.removeDiacritics(expected).toLowerCase();
var boolChk = cleanValue.includes(searchCleanText);
return boolChk;
}
}
$scope.showItems = $filter('filter')($scope.showSal, $scope.searchSal.jud, functionFilter);
console.log($scope.showItems);
console.log($scope.showItems.length);
$scope.out = '$scope.showItems.length = ' + $scope.showItems.length;
}
});
};
}]);
Constants:
app.constant("appConst", {
judArr: ["BUCUREȘTI", "Alba", "Arad", "Argeș", "Bacău"],
salArr: [
{ den: 'Oracle Romania', jud: 'Bucuresti'},
{ den: 'Oracle Romania', jud: 'Bucuresti'},
{ den: 'Oracle Romania', jud: 'Bucuresti'},
{ den: 'Microsoft', jud: 'Bucuresti'},
{ den: 'Microsoft', jud: 'Bucuresti'},
{ den: 'Computer Generated Solutions - CGS Europe', jud: 'Bucuresti'},
{ den: 'Computer Generated Solutions - CGS Europe', jud: 'Bucuresti'}
],
defaultDiacriticsRemovalMap: [
{'base':'A', 'letters':/[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2...]
});