javascript - Bind multiple values to ng-model angularjs - Stack Overflow

admin管理员组

文章数量:1300021

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

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

• javascript
• angularjs

Share Improve this question Follow edited May 7, 2015 at 20:39 NissimL 14888 bronze badges asked Sep 10, 2013 at 9:26 Tushar SharmaTushar Sharma 34711 gold badge33 silver badges1111 bronze badges 4

• Add some sample code? How is your html structured. – Chandermani Commented Sep 10, 2013 at 9:47
• <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 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 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 Commented Sep 10, 2013 at 10:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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/api/ng.directive:ngRepeat

Binding multiple values to a model is a no-no. Typically, a plex model would need a plex 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./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> 

本文标签： javascriptBind multiple values to ngmodel angularjsStack Overflow