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

<select data-ng-model="test.ProjectId" data-ng-options="test.ProjectId as test.ProjectName for test in items" id="Project"><option value="">-- Choose a Project --</option> </select> — Tushar Sharma
– Tushar Sharma, Commented Sep 10, 2013 at 9:51
This code is a part of the code that generated several such dropdwonlists in the UI on click of "Add more" button. Now say I have 5 dropdwonlists, and I want to send the selected values to the server, to store in the database, I cannot use data-ng-model, as it is the directive that is bringing values to the UI. So what technique or directive should I use to send all the 5 selected values to the server side code to store in the DB. — Tushar Sharma
– Tushar Sharma, Commented Sep 10, 2013 at 9:54
@Chandermani. I have edited the post and it has the sample code. And give me guidance accordingly. Thanx a ton! — Tushar Sharma
– Tushar Sharma, Commented Sep 10, 2013 at 10:34

Chandermani · Accepted Answer · 2013-09-10 09:59:28Z

3

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

answered Sep 10, 2013 at 9:59

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tushar Sharma Over a year ago

So $scope.selectedProjects=[]; would hold the IDs of the selected projects. And item in array would be iteration for all the projectIds in the selectedProjects array. Right?

Chandermani Over a year ago

The ng-repeat expression is a dummy expression i have used. I don't know what expression you use to generate the project dropdowns. Share some come in your question for a better answer

Tushar Sharma Over a year ago

I have edited the code, and put it. Please have a look at it!

Chandermani Over a year ago

You should use use current ng-repeat expression ng-repeat="alert in alerts"

Tushar Sharma Over a year ago

But that would stop the functionality of "add more projects". Do you have any other code that would serve both the things. It would also allow us to send the array to the server and also allow us to add dropdowns on demand.

|

Konkret · Accepted Answer · 2019-08-24 00:04:11Z

Binding multiple values to a model is a no-no. Typically, a complex model would need a complex identifier, something like an array or an object literal. In your case, that's not what you need. Here's an example of how this can be done using your specific case.

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

Collectives™ on Stack Overflow

Bind multiple values to ng-model angularjs

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related