将多个值绑定到 ng-model angularjs

Bind multiple values to ng-model angularjs

本文关键字：ng-model angularjs 绑定      更新时间：2023-09-26

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

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

下拉列表从数据库中获取数据并进行填充。我已使用 LINQ 从控制器.cs文件填充了它们。

这些值使用

ng-model=item.projectId

其中 item 是从控制器返回的列表.cs projectId 是我们用来标识项目的 ID。

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

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

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

我已经提供了代码。

这是一个代码...

用于在单击时添加更多下拉列表的控制器 - "添加更多项目"

自定义指令（警报）添加新的滴滴

<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>

应用代码.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);
};
}

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

我确定 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]。这会将所选值绑定到数组中的元素。此数组稍后可用于提交数据。

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

将多个值绑定到模型是不行的。通常，复杂模型需要一个复杂的标识符，类似于数组或对象文本。在您的情况下，这不是您所需要的。下面是如何使用您的特定案例完成此操作的示例。

<!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>
相关文章：