(function () {
'use strict';
var myApp = angular.module('myApp', []);
var uniqueItems = function (data, key) {
var result = new Array();
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
console.log(value);
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
function getDistinctValue(items) {
var lookup = {};
var result = [];
for (var item, i = 0; item = items[i++];) {
var name = item.professionalarea.description;
if (!(name in lookup)) {
lookup[name] = 1;
result.push(name);
}
}
return result;
}
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function (file, uploadUrl) {
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
})
.success(function () {
})
.error(function () {
});
}
}]);
myApp.controller('myCtrl', ['$scope', function ($scope) {
$scope.usePants = {};
$scope.players = [
{
name: 'Bruce Wayne',
shirt: 'XXL',
pants: '42',
professionalarea: {
idAreaProfissional: 1,
description: "IT"
},
shoes: '12'
}, {
name: 'Bruce Wayne',
shirt: 'XXL',
pants: '28',
professionalarea: {
idAreaProfissional: 1,
description: "test"
},
shoes: '12'
}, {
name: 'Bruce Wayne',
shirt: 'XXL',
pants: '35',
professionalarea: {
idAreaProfissional: 1,
description: "IT"
},
shoes: '12'
}
];
// Watch the pants that are selected
$scope.$watch(function () {
return {
players: $scope.players,
usePants: $scope.usePants
}
}, function (value) {
var selected;
//here i want call professionalarea.description and don't pants
$scope.pantsGroup = getDistinctValue($scope.players);
var filterAfterPants = [];
selected = false;
for (var j in $scope.players) {
var p = $scope.players[j];
for (var i in $scope.usePants) {
if ($scope.usePants[i]) {
selected = true;
if (i == p.professionalarea.description) {
filterAfterPants.push(p);
break;
}
}
}
}
if (!selected) {
filterAfterPants = $scope.players;
}
$scope.filteredPlayers = filterAfterPants;
}, true);
$scope.$watch('filtered', function (newValue) {
if (angular.isArray(newValue)) {
console.log(newValue.length);
}
}, true);
});
myApp.filter('groupBy',
function () {
return function (collection, key) {
if (collection === null) return;
return uniqueItems(collection, key);
};
});
})();
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<style>
.gridStyle {
border: 1px solid rgb(212, 212, 212);
margin-left: 15px;
width: 97%;
height: 130px;
float: left;
font-weight: normal;
padding: 35px 10px 10px 10px;
}
</style>
<title>Upload </title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div>
<section class="left" style="border-right:1px">
<div class="filter">
Pant Size
<div>
<div ng-repeat="professionalarea in pantsGroup">
<b><input type="checkbox" ng-model="usePants[professionalarea]" />{{professionalarea}}</b>
<span>({{filteredPlayers.length}})</span>
</div>
</div>
</div>
</section>
<section class="right" style="border-right:1px">
<div>
<ul>
<li ng-repeat="player in filteredPlayers | filter:query">
<p><b>Player: {{player.name}}</b></p>
<p>Shirt Size: {{player.shirt}} Pant Size: {{player.pants}} Shoe Size: {{player.shoes}}</p>
</li>
</ul>
</div>
</section>
</div>
</div>
</body>
</html>