Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/1.0.8/angular.min.js"></script>
<div ng-controller="MyCtrl">
<input type="text" placeholder="Nome do usuário" ng-model="search_nome">
<select ng-model="search_turmas.turmas.value">
<option value="!!">Todos</option>
<option ng-repeat="option in listTurmasFilter" value="{{option.value}}">{{option.title}}</option>
</select>
<table>
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Turmas</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="usuario in dadosUserAndTurma | filter:{nome:search_nome} | filter:filterTurma">
<td>{{usuario.idUser}}</td>
<td>{{usuario.nome}}</td>
<td><span ng-repeat="trm in usuario.turmas">
[ {{trm.turma}} ]
</span></td>
</tr>
</tbody>
</table>
</div>
CSS
thead th {
font-weight: bold;
height: 40px;
}
JavaScript
function MyCtrl($scope) {
$scope.listTurmasFilter = [{
title: "Turma 1",
value: 1
}, {
title: "Turma 2",
value: 2
}, {
title: "Turma 3",
value: 3
}];
$scope.search_nome = "";
$scope.search_turmas = {
turmas: {
value: "!!"
}
};
$scope.filterTurma = function(usuario) {
if ($scope.search_turmas.turmas.value == '!!')
return true;
for (var i = 0; i < usuario.turmas.length; i++) {
var turma = usuario.turmas[i];
console.log('Usuário: ' + usuario.nome);
console.log('Turma usuário: ' + turma.value);
console.log('Turma filtrada: ' + $scope.search_turmas.turmas.value);
if (turma.value == $scope.search_turmas.turmas.value)
return true;
}
return false;
};
$scope.dadosUserAndTurma = [{
idUser: 20,
nome: "Carlos",
turmas: [{
turma: "Turma 1",
value: 1
}, {
turma: "Turma 2",
value: 2
}, {
turma: "Turma 3",
value: 3
}]
}, {
idUser: 21,
nome: "Luiz",
turmas: [{
turma: "Turma 1",
value: 1
}, {
turma: "Turma 3",
value: 3
}]
}, {
idUser: 22,
nome: "Priscilla",
turmas: [{
turma: "Turma 2",
value: 2
}]
}, {
idUser: 24,
nome: "Pedro",
turmas: []
}];
}