Angular ng-options不显示所有元素

Question

我正在使用AngularJS在一些应用程序中工作,我正在使用该ng-options指令,但我有一个问题.当我选择"Provincia"时,"Cantón"选择仅显示数组中的最后一个元素.

谁知道问题是什么？

这是我的HTML代码:

<div class="form-group">
  <select class="form-control" ng-model="selected.provincia" ng-options="p.provincia for p in geografiaCR">
    <option value="" disabled selected hidden>Seleccione una provincia</option>
  </select>
</div>
<div class="form-group">
  <select class="form-control" ng-model="selected.nombre" ng-options="n.nombre for n in selected.provincia.cantones">
    <option value="" disabled selected hidden>Seleccione un cantón</option>
  </select>
</div>

这是Angular代码:

$scope.selected = {};
$scope.geografiaCR = [
  {
    provincia: 'San José',
    cantones: [{nombre: 'San José',nombre: 'Escazú',nombre: 'Desamparados',nombre: 'Puriscal',nombre: 'Tarrazú',
                nombre: 'Aserrí',nombre: 'Mora',nombre: 'Goicochea',nombre: 'Santa Ana', nombre: 'Alajuelita',
                nombre: 'Acosta',nombre: 'Tibás',nombre: 'Moravia',nombre: 'Montes de Oca',nombre: 'Turrubares',
                nombre: 'Dota',nombre: 'Curridabat',nombre: 'Perez Zeledón', nombre: 'León Cortes'}]
  },
  {
    provincia: 'Limón',
    cantones: [{nombre: 'Limón',nombre: 'Pocosí',nombre: 'Siquirres',nombre: 'Talamanca',nombre: 'Matina',
                nombre: 'Guácimo'}]
  }
];

Answer 1

你cantones是一个Object它的nombre属性,都会反复重写.

更改

cantones: [{nombre: 'Limón',nombre: 'Pocosí',nombre: 'Siquirres',
            nombre: 'Talamanca',nombre: 'Matina', nombre: 'Guácimo'}]

至

cantones: [{nombre: 'Limón'},{nombre: 'Pocosí'},{nombre: 'Siquirres'},
           {nombre: 'Talamanca'},{nombre: 'Matina'}, {nombre: 'Guácimo'}]

同样是另一个当然..