CODEWITHSUNDEEP
javascriptjqueryangularjs
Neo
Neo

Reputation: 16239

How do I get all selected dropdown values in one model angular js

 <tr ng-show="show">
                    <td>                     
                        <select class="form-control" data-ng-model="MyModel.FirstName" data-ng-options="firstname.Name for name in MyProperties" ng-show="editmode" style="width:100%; ">
                            <option value="" style="margin-left:25px">-Select First Name-</option>
                        </select>

                    </td>
                    <td>
                        <select class="form-control" data-ng-model="MyModel.LastName.SelectedOption" ng-options="lastname.Name for lastname in MyModel.LastName.Options" ng-show="editmode" style="width:100%; ">
                            <option value="" style="margin-left:25px">-Select Last Name-</option>
                        </select>
                    </td>

                    <td>
                        <a href="" class="glyphicon glyphicon-save buttons" data-placement="left" ng-click="editmode=!editmode;Save("Need to pass model which contain both above values")" ng-show="editmode"></a>
                    </td>

How do I get both dropdown (dynamically generated) values in single model which I could pass to save method and get it in index,js

index.js

 $scope.Save = function (MyModel) {
        var AlldataObj = {
            FirstName: MyModel.FirstName,
            LastName: MyModel.LasttName

        };

Upvotes: 0

Views: 534

Answers (2)

joel.software
joel.software

Reputation: 1515

There seems to be some convolution in your model, which I'm guessing stems form application needs that aren't obvious here. However the main answer to your question, I believe is that you can defined the model in the function as: ng-click="Save(MyModel)" where MyModel is a $scope variable.

HTML

<a href="javascript:void(0);" ng-click="editMode=!editMode;Save(MyModel)">Save</a>

Further more, you can manipulate this information in your save function:

$scope.Save = function(MyModel) {
    
    var values = {
      first: MyModel.FirstName, 
      last: MyModel.LastName.SelectedOption
    };

    console.log(values);
    //Or $http/Restangular post these values somewhere

}

I've created a working Plunkr for your reference here.

Upvotes: 1

shreyansh
shreyansh

Reputation: 1687

Have a look at this code might be useful for you 

<doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body ng-app="myApp" data-ng-controller="HomeCtrl">

<select ng-model="opt.first" ng-options="obj.code as obj.code for obj in opts">
      <option value="">select</option>
</select>

<select ng-model="opt.second" ng-options= "obj.code as obj.code for obj in opts1">
     <option value="">select</option>
</select>

 <button ng-click="save(opt)">Save</button>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>

angular.module('myApp', []);

angular.module('myApp').controller('HomeCtrl', ['$scope', function($scope) {

 $scope.opts =  [

                         {

                           "code" : "ABC",

                           "num" : ["246810","4681012","681012"]
                         },

                         {   
                           "code" : "DEF",

                           "num" : ["13579","357913","5791315"]
                         }

                ] ;


$scope.opts1 =  [

                         {

                           "code" : "ABC",

                           "num" : ["246810","4681012","681012"]
                         },

                         {   
                           "code" : "DEF",

                           "num" : ["13579","357913","5791315"]
                         }

                ] ;

                $scope.save=function(model)
                {
                    console.log("model==", model)
                    var obj={};
                    obj.firstname=model.first;
                    obj.lastname=model.second;
                    console.log("first==", obj.firstname);
                    console.log("last==", obj.lastname)
                }        


}]);
</script>
</body>
</html>

Upvotes: 1

Related Questions