如何使用angularjs在下拉列表中获取所选项目?

时间:2015-09-22 09:18:32

标签: javascript angularjs

我有两个多选列表。

点击/选择第一个列表中的任何项目,我想从第一个列表中删除所选项目并将其移动到第二个列表,反之亦然。

我尝试了ng-changeng-click,但没有想到。

以下是我的代码

第一份清单

<select style="min-height:200px"
        multiple class="form-control"
        ng-model="listOneItem"
        ng-options="listOneItem.Name for listOneItem in listOneItems track by listOneItem.Name"
        ng-change="moveItemsToSecondList();"></select>

第二名单

 <select style="min-height:200px"
            multiple class="form-control"
            ng-model="listTwoItem"
            ng-options="listTwoItem.Name for listTwoItem in listTwoItems track by listTwoItem.Name"
            ng-change="moveItemsToFirstList();"></select>

Angularjs

  $scope.moveItemsToSecondList= function () {
    alert(listOneItem[0].Name);
  };

  $scope.listOneItems= [{
    Name: 'Independence Day'
  }, {
    Name: 'Labor Day'
  }, {
    Name: 'Thanksgiving Day'
  }, {
    Name: 'Chrismas Day'
  }];

我没有编写移动功能,因为我无法调用我的方法。即我只是在方法中发出警告,如图所示。

1 个答案:

答案 0 :(得分:3)

您好我在这里创建了jsfiddle demo 我在其中添加了一些逻辑,我帮助你 http://jsfiddle.net/qjcqwhsw/1/

$scope.moveItemsToSecondList= function (items) {
    for(var i=0; i<items.length; i++){
        var index = $scope.listOneItems.indexOf(items[i]);
        $scope.listTwoItems.push(items[i]);
        $scope.listOneItems.splice(index, 1);            
    }

};