从级联下拉列表和列表中删除项目

时间:2016-10-06 09:45:27

标签: angularjs ionic-framework

我尝试删除级联下拉列表和列表复选框,即下拉菜单中的项目,单击该按钮时必须删除其相关的复选框项目。我无法从下拉列表中删除所选项目,请帮我删除所需的项目。

link

HTML:

<ion-view view-title="Car Type">
  <ion-content ng-contorller="carBrand">
    <h3> Add/Edit the Car Types </h3>
    {{sample}}
    Make:
      <!--select name="client" ng-model="selectedRequest.continent" ng-options="c.name for c in brandList" required></select-->
      <select ng-model="carBrand" ng-options="make.name for make in brandList"></select>
     Type:
    <ion-checkbox ng-model="cartype" ng-repeat="brandType in carBrand.types" ng-disabled="!carBrand">
    <span>{{brandType}}</span>
    </ion-checkbox><br><br>
    <button ng-click="addEntry()">Edit</button>
    <button ng-click="home()">Back</button>
    <button ng-click="delete($index)">Delete</button>
  </ion-content>
</ion-view>

控制器:

var carService =angular.module('carService', ['ionic']);
carService.controller('carBrand',['$scope',function($scope){

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

 $scope.remove=function(index){
   delete $scope.brandList[$index];
 };
}]);

1 个答案:

答案 0 :(得分:0)

您的remove不正确

$scope.remove = function(){
   $scope.brandList.splice($scope.brandList.indexOf($scope.carBrand), 1);
   $scope.carBrand = {};
};

此外,您在HTML和控制器delete != remove

上没有相同的名称
<button ng-click="remove()">Delete</button>

并将ng-contorller更正为ng-controller

Splice允许您通过删除现有元素和/或添加新元素来更改数组的内容。