绑定多个值到NG-模型angularjs多个、绑定、模型、NG

2023-09-13 03:42:47 作者:过好

我是新来AngularJS,所以请帮助我。

I am new to AngularJS, so please help me out.

我有一个code产生的onclick dropdownlists一个按钮。

I have a code that generates dropdownlists onclick of a button.

该dropdownlists获取从数据库中的数据,并得到填充。我已经使用LINQ从controller.cs文件填充它们。

The dropdownlists fetch the data from database and get populated. I have populated them by using LINQ from the controller.cs file.

的值是使用绑定到每个下拉

The values are bound to each dropdown using

NG-模式= item.projectId

如果产品从controller.cs返回的列表和专案是,我们正在使用,以确定项目的ID。

Where item is the returned list from the controller.cs and projectId is the ID that we are using to identify the project.

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

Now I want to send all the selected values of each dropdown list to the server.

我现在用在这里2纳克模型的指令,一个是获取填充在dropdownlists的数据,第二个是用于发送值到服务器,这是一个包装早期NG-模型$划分C $角

I am using 2 ng-model directives over here, one is for getting the data populated in the dropdownlists and the second one is for sending the values to the server, which is in the division that wraps the earlier ng-model code.

其实我想要做的是,我上添加项目的点击产生的下拉菜单,我想这些下拉菜单中选择这些值存储在阵列并将其发送到控制器(mvc.net控制器服务器端code)将其进一步保存到数据库中。

Actually what I want to do is, I am generating the dropdowns on click of add projects, and I want to store these selected values of these dropdowns in array and send it to the controller(mvc.net controller server side code) to further save it to the database.

我所提供的code。

下面是一个在code ...

Here's a the code...

//控制器用于添加更多的点击下拉列表 - 添加更多的项目     

//the controller for adding more dropdowns on click - "Add more projects"

//自定义指令(警告)添加新dropdons

//custom directive (alert) to add new 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>

code为app.js这是我创建控制器

code for app.js this is my create 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 that will add new dropdowns on click of "add more projects"

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

请帮助我。我想获得的项目列表在阵列中并发送该阵列,以便进一步处理。感谢名单,夏尔马的Tushar

Please help me out. I want to get the list of projects in the array and send that array for further processing. Thanx, Tushar Sharma

推荐答案

我相信,HTML是如何构成的。但是,让我们说有n个下拉菜单的数量

I am sure how the html is structured. But let us say there are n number of dropdowns

在控制器定义一个数组来保存选定项目的ID

In the controller define a array to hold the selected project Ids

$ scope.selectedProjects = [];

在HTML做这样的事情。

In HTML do something like this

<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 [$指数] 。这将选定的价值元素绑定数组中为止。该芯片可以用于以后提交数据。

Basically bind your ng-model to selectedProject[$index]. This would bind the selected value to element in the array. This array can be later used to submit data.

下面 $指数当前互为作用伍号重复。见文档 http://docs.angularjs.org/api/ng.directive:ngRepeat

 
精彩推荐
图片推荐