angularjsionic-frameworkangularjs-ng-repeatng-filter

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.


Solution

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