没有从多选列表框Angular JS中的选定值中获取id

时间:2015-06-15 09:20:01

标签: javascript angularjs multi-select

我有两个列表框,我必须将项目从一个列表框移动到另一个列表框。我能够实现这一部分。现在,我想使用id获取第二个列表框中所有项目的列表,并将其保存在数据库中。 我没有在第二个列表框中获取ID。 获取列表框中的所有项目并将其发送到控制器的最佳方法是什么? 代码:

HTML:

<div class="control-group">
    <div class="selector">
        <select multiple="multiple" id="SelectLeft" ng-model="TaxId" ng-options="tax.TaxId as tax.TaxName for tax in Taxes"></select>
    </div>
    <input id="MoveRight" type="button" value=" >> " ng-click="MoveTaxes()" />
    <input id="MoveLeft" type="button" value=" << " ng-click="MoveTaxes()" />
    <div class="selector">
        <select id="SelectRight" ng-model="SelectRight" multiple="multiple">
        </select>
    </div>
</div>

JS代码如下:

$("#MoveRight,#MoveLeft").click(function (event) {
    var id = $(event.target).attr("id");

    var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
    var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
    var selectedItems = $(selectFrom + " :selected").toArray();
    $(moveTo).append(selectedItems);
    selectedItems.remove;
});

1 个答案:

答案 0 :(得分:0)

首先,我不建议在角度中使用jquery。 其次,当你说&#34;发送给控制器&#34;时,你正在考虑jquery。

现在回答你的问题 -

在第二个div中定义ng-options。

<div class="control-group">
    <div class="selector">
        <select multiple="multiple" id="SelectLeft" ng-model="TaxId" ng-options="tax.TaxId as tax.TaxName for tax in Taxes"></select>
    </div>
    <input id="MoveRight" type="button" value=" >> " ng-click="MoveRight()" />
    <input id="MoveLeft" type="button" value=" << " ng-click="MoveLeft()" />
    <div class="selector">
            <select id="SelectRight" ng-model="SelectRight" ng-options="tax.TaxId as tax.TaxName for tax in TaxesSecond">
            </select>
</div>

现在,当你从左向右移动时,将元素推入第二个数组taxSecond中,并使用splice从第一个数组中删除该元素,反之亦然。

 $scope.MoveRight = function(){
         $scope.TaxesSecond.push($scope.selectedLeft);
         $scope.Taxes.splice($scope.Taxes.indexOf($scope.selectedLeft),1);
    }

希望你能自己编写MoveLeft。