I need to make a filter with angular and linq, in a project in visual studio Wapi rest c #


In my html code, I have a select and I need to select an area and show me all the tables (represented as buttons)

Linq (MesasController.cs)

public IQueryable<Mesa> GetMesasPorZona(int idZona) {
    IQueryable<Mesa> Mesas = db.Mesa;
    Mesas = Mesas.Where(x => x.idZona == idZona);
    return Mesas;

app.js (angular)

$http.get('/api/ZonaMesas/GetZonaMesa').then(function (response) {
    $scope.Zonas = response.data;

$('#VerMesas').on('click', function (e) {
    $http.get('/api/Mesas/GetMesasPorZona/' + document.getElementById("idZona").selectedIndex + 1).then(function (response) {
        $scope.Mesas = angular.fromJson(response.data);

and my html is:

<form class="form-horizontal">      
    <div class="form-group">
        <label class="control-label col-xs-4" for="tipo">Seleccione Zona:</label>
        <div class="col-xs-5">
            <select class="form-control" id="listaZonas" required>
                <option ng-repeat="dto in Zonas"> {{dto.nombreZona}} </option>
        <button type="button" class="btn btn-warning btn-lg" style="margin:auto" id="VerMesas">Ver Mesas</button>

    <div class="form-group">                    
        <div class="col-xs-12" id="MesasDiv">
            <div ng-repeat="a in Mesas" class="col-xs-1" style="margin:5%;">
                <button type="button" class="btn btn-warning btn-circle btn-lg" style="margin:auto" id="{{a.numeroMesa}}" ng-click="ModificarEstadoMesa(a)">{{a.numeroMesa}}</button>

When I want to bring with the selectedIndex , what I select in the combo (previously loaded with angular) gives me an error, it does not recover the data from a list in null.

I've read other options like using ng-model and calling it from angularjs with $scope ... How could I do such a thing?

Try to do it, but the select looks empty (do not load the values)

<select class="form-control" id="listaZonas" ng-model="Filtro" required>
    <option ng-repeat="dto in Zonas"> {{dto.nombreZona}} </option>


$http.get('/api/Mesas/GetMesasPorZona/' +$scope.Filtro).then(function (response) {
    $scope.Mesas = angular.fromJson(response.data);
asked by Aylen Menichetti 14.08.2017 в 23:06

1 answer


Have you tried using ngOptions to load the values of select ?

It would be like this:

<select class="form-control" id="listaZonas" ng-model="ZonaSeleccionada" ng-options="dto.nombreZona for dto in Zonas" required>

And in Js

$scope.Zonas = [
  {idZona: 1, nombreZona:'uno'},
  {idZona: 2, nombreZona:'dos'},
  {idZona: 3, nombreZona:'tres'},
  {idZona: 4, nombreZona:'cuatro'},

You were on the right track in your second code, only that in your case Filtro contains an object dto not the property idZona that you need to send to the API

$http.get('/api/Mesas/GetMesasPorZona/' +$scope.ZonaSeleccionada.idZona).then(function (response) {
  $scope.Mesas = angular.fromJson(response.data);


Based on the error you mentioned you made me realize something, in the select you have id="listaZonas" and in the JS you have document.getElementById("idZona").selectedIndex when it should be document.getElementById("listaZonas").selectedIndex which is the correct element.

answered by 15.08.2017 / 01:12