How to send selected dropdown data from controller in angularjs

Question

I have a table with 12 columns. Each column having one dropdown as a value of "yes and "No". The default value in a dropdown is 'yes". I want to send the selected data while clicking on submit button.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<style>
table {
    border-collapse: collapse;
    margin:0 auto;
}

table, td, th {
    border: 1px solid black;
}
</style>
<body>

<table>
  <tr>
    <th>Month 1</th>
    <th>Month 2</th>
    <th>Month 3</th>
    <th>Month 4</th>
    <th>Month 5</th>
    <th>Month 6</th>
    <th>Month 7</th>
    <th>Month 8</th>
    <th>Month 9</th>
    <th>Month 10</th>
    <th>Month 11</th>
    <th>Month 12</th>

  </tr>
  <tr>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>
    <td><select>
    	<option>Yes</option>
    	<option>No</option>
    </select></td>

  </tr>
  
</table>
<input type="submit" name="submit" ng-click="getValue()">
</body>
</html>

This is my table. how to write angularjs code sending the selected data using get or post method.

Marcus Höglund · Accepted Answer · 2017-05-18 19:48:37Z

One way to do this is to add objects to an array and then use ng-repeat on that array to add options in the table and bind the selected option to each objects value property.

Here's the example

angular.module('app', []).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.ddArray = [];

   $scope.saveMonthData = function(){
     
      //the $scope.ddArray will hold each months selected option in the object.value 
      var url = 'http://your.api.com'
      var data = angular.copy($scope.ddArray);
      // uncomment this area when the url is set
      //  $http.post(url , data).then(function(res) {
      //    
      //  });
    };
    var init = function(){
      for(var i= 1; i< 11; i++){
        var obj ={};
        obj.month = 'Month ' + i;
        obj.value = 'Yes';
        $scope.ddArray.push(obj);
      }
    };

    //Init
    init();
}]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
     <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="testCtrl">
    <table>
      <tr>
        <th ng-repeat="d in ddArray">{{d.month}}</th>
      </tr>
      <tr>
        <td ng-repeat="d in ddArray">
          <select ng-model="d.value">
            <option value="Yes">Yes</option>
      	    <option value="No">No</option>
          </select>
        </td>
      </tr>
    </table>
    <button ng-click="saveMonthData()">Post</button>
</body>

</html>

Thank you so much. This is what i expected
– sathish kumar
Commented May 22, 2017 at 7:37 — sathish kumar, Commented May 22, 2017 at 7:37

Rahul · Accepted Answer · 2017-05-18 20:10:18Z

You can create 12 months and managed using scope variable. If you are using angular js then it will work Two way data binding for accosiated variable .

JsFiddle Working Example

<div ng-controller="MyCtrl">
  <table>
  <tr>
  <th ng-repeat="month in months">{{month.key}}</th>
  </tr>
  <tr>
    <td ng-repeat="month in months">
    <select ng-model="month.value">
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>
    </td>
   </tr>

</table>
</div>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
$scope.save= function(data){
console.log(data)
}
   $scope.months =[ 
{"key" : "January", "value" : 1},
{"key" : "February", "value" : 1},
{"key" : "March", "value" : 1},
{"key" : "April", "value" : 1},
{"key" : "May", "value" : 1},
{"key" : "June", "value" : 1},
{"key" : "July", "value" : 1},
{"key" : "August", "value" : 1},
{"key" : "September", "value" : 1},
{"key" : "October", "value" : 1},
{"key" : "November", "value" : 1},
{"key" : "December", "value" : 1}]
}

Please find console log for result.

Collectives™ on Stack Overflow

How to send selected dropdown data from controller in angularjs

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related