ドロップダウンの内容を表示することができません

Question

私はアプリケーションを開発するためにionicを使用しています。ドロップダウンボックスとリストをカスケード接続しようとしていますので、ドロップダウンからオプションを選択するとドロップダウンでの選択に関連するオプションを表示します。ここでは、ドロップダウンリストとリストのオプションが表示されません。だから、誰が何をやらなければならないのか、何が間違いなのかを説明できるのだろうか？

https://plnkr.co/edit/WDxFWFe7hxMsxnzqB2W5

controller.js：

carService.controller('carBrand',['$scope',function($scope){ 
//$scope.sample="Inside the cartype ctrl"; 

$scope.brandList=[ 
{'name':'Benz', 'types':['SUV', 'Sedan']}, 
{'name':'BMW', 'types':['SUV', 'Sedan', 'Van']} 
]; 


$scope.home = function() { 
    window.location="#/menu.html"; 
    }; 

$scope.addEntry=function(){ 
    window.location="#/carEdit.html"; 
}; 
}]); 

HTML：

<ion-view view-title="Car Type"> 
    <ion-content ng-contorller="carBrand"> 
    <h3> Add/Edit the Car Types </h3> 
    {{sample}} 
    Make: 
    <select ng-model="carBrand" ng-options="make for (make,types) in brandList"> 
     <option value="">Select</option> 
    </select> 
    Type: 
    <ion-checkbox ng-model="cartype" ng-repeat="brandType in carBrand" ng-disabled="!carBrand"> 
    <span>{{brandType}}</span> 
    </ion-checkbox><br><br> 
    <button ng-click="addEntry()">Edit</button> 
    <button ng-click="home()">Back</button> 
    </ion-content> 
</ion-view> 

Answer 1

make for (make,types) in brandList 

正しい構文ではありません。正しい構文は

brand as brand.make for brand in brandList 
       ^-- that will be the value displayed in the option: the make of the brand 
    ^-- that will go into the ng-model of the select (i.e. in carBrand): the complete brand object 

です。

brandType in carBrand 

これも正しくありません。選択したブランドのタイプを繰り返し処理する必要があります。

brandType in carBrand.types 

Answer 2

あなたのコントローラがあなたのコンテキストで適切に定義されていないと思います。だから私はあなたのために少し変更しました。あなたの参照のための下記のコードを見てください。

HTML

<div ng-app="myApp"> 
    <div ng-controller="testController"> 
    <ion-view view-title="Car Type"> 
     <ion-content> 
      <h3> Add/Edit the Car Types </h3> 
      {{sample}} 
      Make: 
      <select ng-model="carBrand"> 
       <option value="">Select</option> 
       <option ng-repeat="brand in brandList" value="{{brand.name}}">{{brand.name}}</option> 
      </select> 
      Type: 
      <ion-checkbox ng-model="cartype" ng-repeat="brandType in carBrand" ng-disabled="!carBrand"> 
      <span>{{brandType}}</span> 
      </ion-checkbox><br><br> 
      <button ng-click="addEntry()">Edit</button> 
      <button ng-click="home()">Back</button> 
     </ion-content> 
    </ion-view> 
    </div> 
</div> 

JS

angular.module("myApp", []); 

function testController($scope) { 


    $scope.sample="Inside the cartype ctrl"; 

$scope.brandList=[ 
{'name':'Benz', 'types':['SUV', 'Sedan']}, 
{'name':'BMW', 'types':['SUV', 'Sedan', 'Van']}]; 

} 

希望は、この答えはあなたを助けます。