Populate Dropdown 2 basierend auf der Auswahl von Dropdown 1 und wie man iteriert, wenn ich eine Suboption auswähle

Question

Hallo alle zusammen, ich arbeite mit ArgularJs 1.5. Ich muss Dropdown 2 basierend auf Dropdown 1 auswählen, um es nur anzuzeigen, wenn es existiert (wenn DropDown 1 ausgewählt wurde dropDown 2), sonst zeige ich Dropdown 2 nicht (deaktiviere es) und zeige die Werte von dropDown ausgewählt (entweder von dropDown) 1 oder von DropDown 2) in meine Tabelle.

In diesem Fall habe ich ein dropDown 1 mit dem Namen city, die hat 3 subcity (Drop-Down-2) Ich möchte ihnen zeigen, wenn ich city wählen und iterieren Werte (Matrix), wenn ich ein Subcity wählte wie 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> 

und das ist mein Skript 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}, 
    ] 
    }; 

das nicht mein Problem beheben ich kann die dropDown 2 sehen, und ich kann seine Werte nicht wiederholen. Jeder könnte mir bitte helfen.

Answer 1

Das erste Problem ist hier die Datenstruktur - es wird nicht zulassen, Sie das erwartete Verhalten der Art und Weise zu simulieren ist, so habe ich es ein wenig:

$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 
       } ] 
     } 
    ]; 

Zweite Änderung: Ich habe ng- Änderungsereignis auf beiden Dropdown-Menüs und HTML ist jetzt:

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

und drittens - das Änderungsereignis:

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

Eine voll funktionsfähige Demo ist here