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}">
<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() {
$scope.search_turmas = $scope.changeTurma;
};
$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: 1}
]
} ,
{
idUser:24,
nome: "Pedro",
turmas: []
}
];
}