如何在angularjs中从控制器发送选定的下拉数据答案

【问题标题】：How to send selected dropdown data from controller in angularjs如何在angularjs中从控制器发送选定的下拉数据
【发布时间】：2017-05-18 18:32:14
【问题描述】：

我有一个 12 列的表。每一列都有一个下拉列表作为“是”和“否”的值。下拉列表中的默认值为“是”。我想在点击提交按钮时发送选定的数据。

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

这是我的桌子。如何编写使用 get 或 post 方法发送所选数据的 angularjs 代码。

【问题讨论】：

标签： html angularjs

【解决方案1】：

执行此操作的一种方法是将对象添加到数组中，然后在该数组上使用 ng-repeat 以在表中添加选项并将所选选项绑定到每个对象的值属性。

这是一个例子

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="angularjs@1.5.8" 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>

【讨论】：

非常感谢。这是我所期望的

【解决方案2】：

您可以创建 12 个月并使用范围变量进行管理。如果您使用的是 Angular js，那么它将为附属变量的双向数据绑定工作。

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

请查找控制台日志以获取结果。

【讨论】：