Question

我正在使用ionic来开发app.Here我正在尝试级联下拉框和列表，这样当从下拉列表中选择一个选项时，列表将显示与所做选择相关的选项下拉菜单。在这里，我没有在下拉列表和列表中获得选项。所以，任何人都可以解释必须做什么以及错误是什么？

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

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

这也不正确。您想要遍历所选品牌的类型，因此它应该是

{{1}}

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

}

希望这个答案可以帮到你。

无法在下拉列表中显示内容

2 个答案: