将多个值绑定到ng-model angularjs

时间:2013-09-10 09:26:52

标签: javascript angularjs

我是AngularJS的新手,所以请帮帮我。

我有一个代码,只需按一下按钮即可生成下拉列表。

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

使用

将值绑定到每个下拉列表

ng-model=item.projectId

其中item是来自controller.cs的返回列表,projectId是我们用来标识项目的ID。

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

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

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

我提供了代码。

这是代码......

//用于在点击上添加更多下拉菜单的控制器 - “添加更多项目”      

//自定义指令(警报)添加新的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的代码 这是我的创建控制器

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);
};
}

请帮帮我。 我想获取数组中的项目列表并发送该数组以进行进一步处理。 感谢名单, Tushar Sharma

2 个答案:

答案 0 :(得分:3)

我确定html的结构如何。但是,让我们说有n个下拉列表

在控制器中定义一个数组来保存选定的项目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模型绑定到selectedProject[$index]。这会将所选值绑定到数组中的元素。此数组稍后可用于提交数据。

此处$indexng-repeat的当前互动号码。请参阅文档http://docs.angularjs.org/api/ng.directive:ngRepeat

答案 1 :(得分:0)

将多个值绑定到模型是不行的。通常,复杂模型需要复杂的标识符,例如数组或对象文字。就您而言,这不是您所需要的。这是一个如何使用您的特定案例来完成此操作的示例。

GET /v2.1/accounts/{accountId}/users/{userId}/signatures