AngularJS:在列表框中获取所选项目

时间:2014-08-11 11:03:57

标签: asp.net-mvc angularjs

我是angularjs的新手。

我分别有2个允许和拒绝项目的列表框。

用户可以从任何listbox1中选择任意数量的项目,并通过两个按钮转移到listbox2。

我想从listbox1中获取所选项目并转移到listbox2。 我们如何获得listbox1的选定项目?

请在下面找到代码示例:

MVC页面

@Html.ListBox("lstboxDeny", new SelectList(Model.DenyList, "value", "text"), new { ng_model="modelDenyList"})

@Html.ListBox("lstboxAllow", new SelectList(Model.AllowList, "value", "text"), new { ng_model = "modelAllowList" })

Javascript文件

var myApp = angular.module('myApp', []);

myApp.controller('myAppController', ['$scope', function ($scope) {

 $scope.loadedAllowList.push(modelAllowList);
 $scope.loadedDenyList.push(modelDenyList);

 $scope.btnAllow_Click = function () {
        $scope.loadedAllowList.push($scope.????SELECTED-ITEM?????);
        /* splice logic */
    }   

 $scope.btnDeny_Click = function () {
        $scope.loadedDenyList.push($scope.????SELECTED-ITEM?????);
        /* splice logic */
    }

} ]);

1 个答案:

答案 0 :(得分:0)

您必须使用带有ng-options指令的Html Select标记而不是MVC帮助程序。

<select ng-options="ai.text for al in loadedAllowList" ng-model="selectedAllowedItem"></select>

<select ng-options="di.text for dl in loadedDenyList" ng-model="selectedDenyItem"></select>

在您的控制器功能中,您可以使用selectedAllowedItemselectedDenyItem在列表之间移动您的选择。