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);
});