javascript - 将多个值绑定(bind)到 ng-model angularjs

Question

我是 AngularJS 的新手，所以请帮助我。

我有一个代码可以在单击按钮时生成下拉列表。

下拉列表从数据库中获取数据并填充。我使用 controller.cs 文件中的 LINQ 填充了它们。

使用以下方法将值绑定(bind)到每个下拉列表

ng-model=item.projectId

其中 item 是从 controller.cs 返回的列表，projectId 是我们用来识别项目的 ID。

现在我想将每个下拉列表的所有选定值发送到服务器。

我在这里使用了 2 个 ng-model 指令，一个用于获取下拉列表中填充的数据，第二个用于将值发送到服务器，它位于包装早期 ng-model 代码的部分.

实际上我想做的是，我在单击添加项目时生成下拉菜单，我想将这些下拉菜单的这些选定值存储在数组中并将其发送到 Controller (mvc.net Controller 服务器端代码)进一步保存到数据库中。

我已经提供了代码。

这是代码...

//点击时添加更多下拉菜单的 Controller - “添加更多项目”

//自定义指令(警报)以添加新的 dropdons

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)" >
    <ul style="list-style-type: none; margin-left: 0px;" >
        <li>
            <select data-ng-model="selectedProject[$index]"
            data-ng-options="test.ProjectId as test.ProjectName for test in items" id="Project">
            <option value="">-- Choose a Project --</option>
            </select>
            <button type="button" ng-click="closeAlert($index)"><img src="delete.png" alt="Remove" style="height:20px; width:20px;" /></button>
        </li>
    </ul>
</alert>
<button class='btn' type='button' ng-click="addAlert()">Add Projects</button>

app.js 代码这是我的创建 Controller

var CreateCtrlEmp = function ($scope, $location, SampleEmp, SampleProj, SampleDes, sharedValues) {
//gets the projects dropdown populated with values
$scope.items = SampleProj.query({ q: $scope.query });
//gets the designation dropdown populated with values 
$scope.itemsd = SampleDes.query({ q: $scope.query });
//save function
$scope.save = function () {
    SampleEmp.save($scope.item);
    $location.path('/emp');
};};

//单击“添加更多项目”时将添加新下拉菜单的函数

function AlertDemoCtrl($scope) {
$scope.alerts = [
];
$scope.addAlert = function () {
    $scope.alerts.push({});
};
$scope.closeAlert = function (index) {
    $scope.alerts.splice(index, 1);
};
}

请帮帮我。我想获取数组中的项目列表并将该数组发送以供进一步处理。谢谢，图沙尔夏尔马

Answer 1

我确定 html 的结构。但是假设有 n 个下拉列表

在 Controller 中定义一个数组来保存选定的项目 ID

$scope.selectedProjects=[];

在 HTML 中做这样的事情

<div data-ng-repeat='item in array'> 
   <select data-ng-model="selectedProject[$index]" data-ng-options="test.ProjectId as test.ProjectName for test in items" id="Project"><option value="">-- Choose a Project --</option> </select> 
</div>

基本上将您的 ng-model 绑定(bind)到 selectedProject[$index]。这会将所选值绑定(bind)到数组中的元素。该数组稍后可用于提交数据。

这里的 $index 是 ng-repeat 的当前交互次数。请参阅文档 http://docs.angularjs.org/api/ng.directive:ngRepeat