javascript - 根据下拉菜单 1 选择填充下拉菜单 2 以及当我选择子选项时如何迭代

Question

大家好，我正在使用 ArgularJs 1.5。我需要根据 Dropdown 1 选择填充 Dropdown 2，仅当它存在时才显示它(如果选择的 DropDown 1 有 dropDown 2)，否则不显示 Dropdown 2(停用它)并显示所选 dropDown 的值(dropDown 之一) 1 或下拉菜单 2) 进入我的表格。

在本例中，我有一个名为 city 的下拉菜单 1其中有 3 subcity (下拉菜单2)我想在选择city时显示它们当我选择像 subcity02 这样的子城市时，迭代值(矩阵)

<div ng-app="app" ng-controller="MainController">
    <select ng-model="selectedCity" ng-options="x as (x | cityFilter) for (x, y) in cities">
    </select>

    <select ng-model="selectedSubCity"  ng-options="x as (x | cityFilter) for (x, y) in selectedCity.subCity">
    </select>
</div>

<table>
    <tr ng-repeat="item in selectedCity"><!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
    </tr>
</table>

这是我的脚本 js:

angular.module('app', [])
.filter('cityFilter', function() {
    return function(city) {
        return city.replace('_', ' ');
    }
})
.controller('MainController', ['$scope', function($scope) { 
  $scope.cities = {
    city : [
    {id:'c01' , name:'name1', price:15},
    {id:'c02' , name:'name2', price:18},
    {id:'c03' , name:'name3', price:11},
    {subCity01 : [
            {id:'sub01' , name:'nameSub1', price:1},
            {id:'sub02' , name:'nameSub2', price:8},
            {id:'sub03' , name:'nameSub3', price:1},
    ],
    subCity02 : [
            {id:'ssub01' , name:'nameSsub1', price:1},
            {id:'ssub02' , name:'nameSsub2', price:8},
            {id:'ssub03' , name:'nameSsub3', price:4},
    ],
    subCity03 : [
            {id:'sssub01' , name:'nameSssub1', price:1},
            {id:'sssub02' , name:'nameSssub2', price:2},
            {id:'sssub03' , name:'nameSssub3', price:1},
    ]
},
  ],
    city_02 : [
    {id:'cc01' , name:'name11', price:10},
    {id:'cc02' , name:'name22', price:14},
    {id:'cc03' , name:'name33', price:11},
  ],
    city_03 : [
    {id:'ccc01' , name:'name111', price:19},
    {id:'ccc02' , name:'name222', price:18},
    {id:'ccc03' , name:'name333', price:10},
  ]
    };

这并不能解决我的问题，我看不到 dropDown 2 并且无法迭代其值。任何人都可以帮助我。

Answer 1

所以这里的第一个问题是数据结构 - 它不允许你按原样模拟预期的行为，所以我稍微改变了它:

$scope.cities = [
         {
              name: "city A",
              elements: [{
                    id: 'c01',
                    name: 'name1',
                    price: 15
              }, {
                    id: 'c02',
                    name: 'name2',
                    price: 18
              }, {
                    id: 'c03',
                    name: 'name3',
                    price: 11
              }],
              subsities: [ {
                          name: "sub A1",
                          elements: [{
                                id: 'sub01',
                                name: 'nameSub1',
                                price: 1
                          }, {
                                id: 'sub02',
                                name: 'nameSub2',
                                price: 8
                          }, {
                                id: 'sub03',
                                name: 'nameSub3',
                                price: 1
                          } ]
                    },
                     {
                          name: "sub A2",
                          elements: [{
                                id: 'ssub01',
                                name: 'nameSsub1',
                                price: 1
                          }, {
                                id: 'ssub02',
                                name: 'nameSsub2',
                                price: 8
                          }, {
                                id: 'ssub03',
                                name: 'nameSsub3',
                                price: 4
                          } ]
                    },
                     {
                          name: "sub A3",
                          elements: [{
                                id: 'sssub01',
                                name: 'nameSssub1',
                                price: 1
                          }, {
                                id: 'sssub02',
                                name: 'nameSssub2',
                                price: 2
                          }, {
                                id: 'sssub03',
                                name: 'nameSssub3',
                                price: 1
                          }]
                    }
              ]
        },
         {
              name: "city B",
              elements: [{
                    id: 'cc01',
                    name: 'name11',
                    price: 10
              }, {
                    id: 'cc02',
                    name: 'name22',
                    price: 14
              }, {
                    id: 'cc03',
                    name: 'name33',
                    price: 11
              } ]
        },
        {
              name: "city C",
              elements: [{
                    id: 'ccc01',
                    name: 'name111',
                    price: 19
              }, {
                    id: 'ccc02',
                    name: 'name222',
                    price: 18
              }, {
                    id: 'ccc03',
                    name: 'name333',
                    price: 10
              } ]
        }
  ];

第二个更改:我在两个下拉菜单中添加了 ng-change 事件，现在的 HTML 是:

<body ng-controller="MainCtrl">
  <select ng-model="selectedCity"      ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
  </select>

  <select ng-show="selectedCity.subsities" ng-model="selectedSubCity"      ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
   </select>

  <table>
        <tr ng-repeat="item3 in data track by item3.id">
              <!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
              <td>{{ item3.id }}</td>
              <td>{{ item3.name }}</td>
              <td>{{ item3.price }}</td>
        </tr>
  </table>

</body>

第三个 - 更改事件:

$scope.extractSubsities = function(itemSelected) {
    if(itemSelected && itemSelected.elements){
        $scope.data = itemSelected.elements;
    }
  }

完整的工作演示是 here