过滤ng-options条件ng-model

时间:2022-07-20 22:59:48

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.

这不起作用。我想过滤选择器城市可能希望通过这些安排的共同值来过滤示例是国家代码:CL,AR,UY。但我一直无法得到。任何批评都是受欢迎的,我是AngularJS的新人,也是离子的。

1 个解决方案

#1


1  

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

没有必要批评。您只需要利用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

我将快速解决一下...注意我没有将pais传递给函数

<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.defaultPais访问所选对象

$scope.updateTheOtherDropdown =function()
{    

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

在这里你可以使用$ scope.defaultPais来过滤你的下一个数组。

$scope.ciudades = whatever you filtered;
}

#1


1  

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

没有必要批评。您只需要利用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

我将快速解决一下...注意我没有将pais传递给函数

<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.defaultPais访问所选对象

$scope.updateTheOtherDropdown =function()
{    

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

在这里你可以使用$ scope.defaultPais来过滤你的下一个数组。

$scope.ciudades = whatever you filtered;
}