Nico Hernandez Torres Nico Hernandez Torres - 3 months ago 20
AngularJS Question

Filter ng-options condition ng-model

I'm trying to filter a select depending on the value selected in another selector. These Common have value. The data are :

Countries

{
"paisCodigo": "AR",
"paisNombre": "Argentina",
"paisVigente": 1
},
{
"paisCodigo": "CL",
"paisNombre": "Chile",
"paisVigente": 1
},
{
"paisCodigo": "UY",
"paisNombre": "Uruguay",
"paisVigente": 1
}

<select name="selectPais" id="selectPais" ng-model="defaultPais" ng-options="pais.paisCodigo as pais.paisNombre for pais in paises track by pais.paisCodigo">
<option value="">Seleccione país</option>
</select>


Citys

{
"ciuId": 1,
"ciuNombre": "Santiago",
"ciuPaisCodigo": "CL",
"ciuVigente": 1
},
{
"ciuId": 2,
"ciuNombre": "Viña del Mar",
"ciuPaisCodigo": "CL",
"ciuVigente": 1
},
{
"ciuId": 3,
"ciuNombre": "Valparaíso",
"ciuPaisCodigo": "CL",
"ciuVigente": 1
},
{
"ciuId": 4,
"ciuNombre": "Quilpué",
"ciuPaisCodigo": "CL",
"ciuVigente": 1
},
{
"ciuId": 5,
"ciuNombre": "Montevideo",
"ciuPaisCodigo": "UY",
"ciuVigente": 1
},
{
"ciuId": 6,
"ciuNombre": "Buenos Aires",
"ciuPaisCodigo": "AR",
"ciuVigente": 1
}

<select name="selectCiudad" id="selectCiudad" ng-disabled="!defaultPais" ng-model="defaultCiudad" ng-options="ciudad.ciuId as ciudad.ciuNombre for ciudad in ciudades ((paises | filter:{'ciuPaisCodigo' : defaultPais})) track by ciudad.ciuId">
<option value="">Seleccione ciudad</option>
</select>


This does not work. I would like to filter the selector cities MAY wish to filter by the value in common with these arrangements example is country code: CL, AR, UY. But I have not been able to get. Any criticism is welcome, I'm new in AngularJS and also in ionic.

Answer

No criticism necessary. You just need to leverage ng-change.

In you first dropdown, and an ng-change. Make a function in the controller that updates the array that you will use in the second dropdown.

I am going to do a quick work around... notice I am not passing pais to the function

<select name="selectPais" id="selectPais" ng-model="defaultPais" ng-options="pais.paisCodigo as pais.paisNombre for pais in paises track by pais.paisCodigo" ng-change="updateTheOtherDropdown()">
      <option value="">Seleccione país</option>
</select>

In your controller, put the pseudocode. You should be able to access the selected object with $scope.defaultPais

$scope.updateTheOtherDropdown =function()
{    

here you can use $scope.defaultPais to filter your next array.

$scope.ciudades = whatever you filtered;
}