过滤ng-options条件ng-model

时间:2016-09-08 20:24:02

标签: angularjs ionic-framework angularjs-ng-repeat ng-filter

我尝试根据在另一个选择器中选择的值过滤选择。这些共同具有价值。数据是:

国家

{
  "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>

市内

{
  "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>

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

1 个答案:

答案 0 :(得分:1)

不需要批评。您只需要利用ng-change。

在你的第一次下拉和改变中。在控制器中创建一个函数,用于更新将在第二个下拉列表中使用的数组。

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

lib

在你的控制器中,输入伪代码。您应该能够使用$ scope.defaultPais

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

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

$scope.updateTheOtherDropdown =function()
{