根据Dropdown 1的选择以及选择子选项时如何迭代填充Dropdown 2

Populate Dropdown 2 based on Dropdown 1 selection and how to iterate when I chose a suboption

本文关键字：Dropdown 选择 何迭代 迭代 填充 选项 根据      更新时间：2024-05-27

大家好，我正在使用ArgularJs 1.5。我需要根据Dropdown 1的选择填充Dropdown 2，只在它存在的情况下显示它（如果选择的Dropdown 1有Dropdown 2），否则不显示Dropdown 2（停用它），并在我的表中显示所选的Dropdown的值（Dropdown 1或Dropdown 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，也不能迭代它的值。任何人都可以帮我。

所以这里的第一个问题是数据结构-它不允许你模拟预期的行为，所以我对它做了一点更改：

$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更改事件，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;
    }
  }

完整的工作演示在这里

相关文章：