My AngularJS filter isn't functioning properly when used with an Object.
Here's the View:
<input type="text" ng-model="searchKeyUser.$" placeholder="Search Keys" class="form-control"><br>
<ul class="list-group">
<li class="list-group-item clickable keys" ng-repeat="key in keyUsers | filter:searchKeyUser" ng-class="{ active:Group.isActiveKey(key.Key.id)}" ng-click="Group.show()">
{{key.Key.key}}{{key.show}}
</li>
</ul>
I've tried using searchKeyUser.$, searchKeyUser.Key.$, searchKeyUser.Key.key, but it didn't work as expected. However, the text {{key.Key.key}}{{key.show}} is displaying correctly.
EDIT: JavaScript code snippet:
(function() {
var app = angular.module('groupUsers', []);
app.controller('GroupsController', function($scope, $http){
//Fetching Relationships Users Keys
$http.get(myBaseUrl + '/QlikRelKeyUser/returnGroups').success(function(data, status, headers, config) {
$scope.keyUsers = data;
console.log($scope.keyUsers);
for(x in $scope.keyUsers){
aux = 0;
qtd = $scope.keyUsers[x].QlikUser.length;
for(y in $scope.keyUsers[x].QlikUser){
aux++;
if(qtd == 1){
$scope.keyUsers[x].show = ' (' + $scope.keyUsers[x].QlikUser[y].name + ')';
}else if(aux == qtd){
$scope.keyUsers[x].show += ', ' + $scope.keyUsers[x].QlikUser[y].name + ')';
}else{
if(aux==1){
$scope.keyUsers[x].show = ' (' + $scope.keyUsers[x].QlikUser[y].name;
}else{
$scope.keyUsers[x].show += ', ' + $scope.keyUsers[x].QlikUser[y].name;
}
}
}
}
console.log('');
}).error(function(data, status, headers, config) {
console.log('ERROR');
console.log(config);
});
$scope.searchKeyUser = {$:''};
});
EDIT 2: Same View:
<input type="text" ng-model="searchGroup.$" placeholder="Search Groups" class="form-control"><br>
<ul class="list-group" >
<li class="list-group-item clickable" ng-repeat="group in groups | filter:searchGroup" ng-class="{ active:Group.isSet(group.QlikUserGroup.id)}" ng-click="Group.setActive(group.QlikUserGroup.id)">
{{group.QlikUserGroup.name}}
<span class='badge bg-important'>1</span>
<span class='badge' stylee='padding-right:30px;'>{{Group.totalKeys(group.QlikUserGroup.id)}}</span>
</li>
</ul>
Using the Same JavaScript:
$http.get(myBaseUrl + '/QlikUserGroup/returnGroups').success(function(data, status, headers, config) {
$scope.groups = data;
}).error(function(data, status, headers, config) {
console.log('ERROR');
console.log(config);
});
The output of console.log($scope.groups); shows:
Array[67]
0: Object
$$hashKey: "object:530"
QlikUserGroup: Object
id: "1"
name: "Name name name"
__proto__: Object
__proto__: Object
1: Object
2: Object
3: Object
4: Object
...