3

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

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

4

2 回答 2

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-model 绑定到selectedProject[$index]. 这会将选定的值绑定到数组中的元素。这个数组以后可以用来提交数据。

这$index是当前的国际编号ng-repeat。请参阅文档http://docs.angularjs.org/api/ng.directive:ngRepeat

于 2013-09-10T09:59:28.140 回答
0

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="keywords" content="Periodic Table, Chemistry">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Angular JS</title>
        <style>

            body{
                font-size: 16px;
            }

            ul{
                border: 1px solid #ccc;
                padding-left: 0;
            }

            li{
                list-style-type: none;
                list-style-position: outside;
                border: 1px solid #eee;
                padding: 1.5rem;
                margin: 0.25rem;
                text-align: center;
                text-transform: uppercase;
            }

            li:hover{
                background-color: #eee;
                cursor: pointer;
            }

            li,
            .results{
                padding: 1.5rem;
                margin: 0.25rem;
                text-align: center;
            }

            .results{
                color: green;
                font-weight: bolder;
                font-size: 2rem;
            }

        </style>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
        <script>

            var app;

            app = angular.module("example10", []);

            app.controller("example10Ctrl1", function($scope, $filter){

                $scope.results = '';

                $scope.dropDown = [];

                $scope.dropDown[0] = "Text 1";
                $scope.dropDown[1] = "Text 2";
                $scope.dropDown[2] = "Text 3";
                $scope.dropDown[3] = "Text 4";

                $scope.getResults = function(index){
                    $scope.results = $scope.dropDown[index];
                }

            });

        </script>
    </head>
    <body ng-app="example10">
        <div ng-controller="example10Ctrl1">
            <ul>
                <li ng-repeat="list in dropDown" ng-click="getResults($index)">{{ list }}</li>
            </ul>
            <div class="results">{{ results }}</div>
        </div>
    </body>
</html>
于 2019-08-24T00:04:11.007 回答