連想配列からアイテムをピックすることで第1ドロップダウン選択に基づいて第2ドロップダウンをバインドする方法は？

Question

私が午前連想配列以下のように：

ドロップダウン1：

$scope.item= 
    { 
     "Item1": [ 
      { 
      "title": "Item1", 
      "choices": [ 
       "Egg", 
       "burger", 
      ] 
      } 
     ], 
     "Item2": [ 
      { 
      "title": "Item2", 
      "choices": [ 
       "Pizza", 
       "Rice", 
      ] 
      } 
     ] 
    } 
}); 

私は2ドロップダウン以下のように過ごしていた項目のリストの両方からアイテム1とアイテム2すなわちタイトルを表示

ドロップダウン2：アイテムselection.forに応じて選択肢を表示します。たとえば、ユーザーがItem1を選択してから2番目のドロップダウンに表示すると、Bggerが表示されます。

しかし、私は、私が唯一の項目の選択に基づいて、私の項目の変数からそれを取得したいと思いますが、私はこれを行う方法を得ていないのです1 extra scope variable for binding this choices in my 2nd dropdown.

をしたいいけません。

今すぐng-optionsの項目から選択肢を選択する方法がないため、2番目のドロップダウンのコードをコメントアウトしました。

1つのスコープ変数から項目を選択して2番目のドロップダウンをバインドすることはできませんか？

var app = angular.module("myApp", []); 
 
app.controller("MyController", function($scope) { 
 
    $scope.item = { 
 
     "Item1": [{ 
 
      "title": "Item1", 
 
      "choices": ["Egg", "burger", ] 
 
     }], 
 
     "Item2": [{ 
 
      "title": "Item2", 
 
      "choices": ["Pizza", "Rice", ] 
 
     }] 
 
    }; 
 
    $scope.myItem = { 
 
     title: null, 
 
     choice: null 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<ul ng-app="myApp" ng-controller="MyController"> 
 
    <select ng-model="myItem.title" ng-options="value[0].title as key for (key , value) in item"> 
 
     <option value="">Select Items</option> 
 
    </select> 
 
    <!--<select ng-model="myItem.choice" ng-options="value[0] as key for (key , value) in item" > 
 
      <option value="">Select choice</option> 
 
    </select>-->{{myItem.title}} </ul>

Answer 1

新しいスコープの変数を導入することなく、これを行うための第2のng-optionsへの入力として最初のng-modelをバインドすることができます。

var app = angular.module("myApp", []); 
 
app.controller("MyController", function($scope) { 
 
    $scope.item = { 
 
     "Item1": [{ 
 
      "title": "Item1", 
 
      "choices": ["Egg", "burger", ] 
 
     }], 
 
     "Item2": [{ 
 
      "title": "Item2", 
 
      "choices": ["Pizza", "Rice", ] 
 
     }] 
 
    }; 
 
    $scope.myItem = { 
 
     title: null, 
 
     choice: null 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<ul ng-app="myApp" ng-controller="MyController"> 
 
    <select ng-model="myItem.title" ng-options="key as key for (key , value) in item"> 
 
     <option value="">Select Items</option> 
 
    </select> 
 
    <select ng-model="myItem.choice" ng-options="value as value for value in item[myItem.title][0].choices"> 
 
     <option value="">Select choice</option> 
 
    </select> {{myItem.title}}{{myItem.choice}} </ul>

Answer 2

             
  
 
   
 
    
var app = angular.module("myApp", []); 
 
    app.controller("MyController", function($scope) { 
 
     $scope.item = { 
 
      "Item1": [{ 
 
       "title": "Item1", 
 
       "choices": ["Egg", "burger", ] 
 
      }], 
 
      "Item2": [{ 
 
       "title": "Item2", 
 
       "choices": ["Pizza", "Rice", ] 
 
      }] 
 
     }; 
 
$scope.myFunc = function() { 
 
$scope.myItem.choices=$scope.item[$scope.myItem.title][0].choices; 
 
    }; 
 
     $scope.myItem = { 
 
      title: null, 
 
      choices: null 
 
     }; 
 
    });
 
    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <ul ng-app="myApp" ng-controller="MyController"> 
 
     <select ng-model="myItem.title" ng-change="myFunc()" ng-options="value[0].title as key for (key , value) in item"> 
 
      <option value="">Select Items</option> 
 
     </select> 
 
     <select ng-model="myItem.choice" ng-options="x for x in myItem.choices" > 
 
       <option value="">Select choice</option> 
 
     </select>{{myItem.choices}} </ul>