Bind multiple values to ng-model angularjs

Question

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

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

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-model=item.projectId

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.

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.

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.

I have provided the code.

Here's a the code...

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

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

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

Answer 1

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

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

$scope.selectedProjects=[];

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>

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.

Here $index is current interation number for ng-repeat. See documentation http://docs.angularjs.org/api/ng.directive:ngRepeat