2

En mi codigo html, tengo un select y necesito seleccionar una zona y q me muestre todas las mesas(representadas como botones)

Linq (MesasController.cs)

[ResponseType(typeof(Mesa))]
[System.Web.Http.HttpGet]
[Route("GetMesasPorZona/{idZona}")]
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);
    });
});

y mi html es:

<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>
            </select>
        </div>
        <button type="button" class="btn btn-warning btn-lg" style="margin:auto" id="VerMesas">Ver Mesas</button>
    </div>

    <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>
                <label>{{a.cantidadMaxima}}</label>
            </div>
        </div>
    </div>
</form>

Cuando quiero traer con el selectedIndex, lo q seleccione en el combo (previamente cargado con angular) me da error, no me recupera los datos de una lista en null.

He leido otras opciones como usar ng-model y llamarlo desde el angularjs con $scope... ¿Cómo podría hacer tal cosa?

Intente hacerlo, pero el select se ve vacío (no cargan los valores)

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

y

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

1 respuesta 1

1

Has intentado usar ngOptions para cargar los valores del select?

Seria de esta manera:

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

Y en Js

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

Ibas por buen camino en tu segundo codigo, solo que en tu caso Filtro contiene un objeto dto no la propiedad idZona que necesitas enviar a la API

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

Actualizado:

En base al error que mencionaste me hiciste percatarme de algo, en el select tienes id="listaZonas" y en el JS tienes document.getElementById("idZona").selectedIndex cuando deberia ser document.getElementById("listaZonas").selectedIndex que es el elemento correcto.

12
  • Uncaught TypeError: Cannot read property 'selectedIndex' of null Este es el error..!! ahi intento con lo q dijiste el 14 ago. 2017 a las 23:21
  • Ahora me da este error, el atributo idZona esta bien porq asi lo tengo definido en el modelo entity framework Uncaught TypeError: Cannot read property 'idZona' of undefined el 14 ago. 2017 a las 23:36
  • Ve mi actualizacion, el segundo error en donde lo da? el 14 ago. 2017 a las 23:38
  • Si.. intente tmb, pero no me funciona bien, es mejor con ng-model!! Lo q pasa ahora es que se me cambio la visualizacion de las mesas no me funciona, quiero que cuando me liste las mesas de acuerdo al estado lo haga con colores en rojo y verde(libres y ocupadas) pero se me ponen todas en amarillo, (por el class="btn btn-warning btn-circle btn-lg" en el boton) el 14 ago. 2017 a las 23:46
  • $('#VerMesas').on('click', function (e) { $http.get('/api/Mesas/GetMesasPorZona/' + $scope.ZonaSeleccionada.idZona).then(function (response) { $scope.Mesas = angular.fromJson(response.data);}); for (var i = 0; i < $scope.Mesas.length; i++) { debugger; if ($scope.Mesas[i].idEstadoMesa === 1) { document.getElementById("" + $scope.Mesas[i].numeroMesa + "").style.background = '#00FF00';} else {document.getElementById("" + $scope.Mesas[i].numeroMesa + "").style.background = '#FE2E2E'; } } document.getElementById("MesasDiv").style.visibility = 'visible';}); el 14 ago. 2017 a las 23:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.