Question

我有一个数组作为成员数组：

[
  {"group":"Canada","data":[{"value":"Ontario","description":"Toronto"},
                            {"value":"Quebec","description":"Quebec City"},
                            {"value":"Manitoba","description":"Winnipeg"}
                           ]
  },
  {"group":"Mexico","data":[{"value":"Jalisco","description":"Guadalajara"},
                            {"value":"Nayarit","description":"Tepic"}
                           ]
  },
  {"group":"United States of America","data":[
                            {"value":"Alabama","description":"Montgomery"},
                            {"value":"Georgia","description":"Atlanta"},
                            {"value":"Mississippi","description":"Jackson"},
                            {"value":"Louisiana","description":"Baton Rouge"},
                            {"value":"Texas","description":"Ausint"}
                           ]
  }
]

我想要一个AngularJS组合框显示组国家列表。当用户选择每个国家/地区时，我希望使用另一个组合来显示该国家/地区的区域名称。

任何人都可以向我指出如何实现它的教程吗？

Answer 1

Plunker example

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <select [(ngModel)]="selectedGroup">
        <option *ngFor="let group of groups" [ngValue]="group">{{group.group}}</option>
      </select>

      <select [(ngModel)]="selectedData">
        <option *ngFor="let item of getData()" [ngValue]="item">{{item.value}}</option>
      </select>

    </div>
  `,
  directives: []
})
export class App {
  selectedGroup;
  selectedData;

  groups = [
...
];
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  getData() {
    let idx = this.groups.indexOf(this.selectedGroup);
    if(idx >= 0) {
      console.log(this.groups[idx]);
      return this.groups[idx].data;
    }
  }
}

两个组合框在AngularJS中显示嵌套数组

1 个答案: