Question

我有一个包含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代码。

Answer 1

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

以下是

的例子

＆＃13;

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();
}]);

＆＃13;

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

＆＃13;

Answer 2

您可以创建12个月并使用范围变量进行管理。如果您正在使用角度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}]
}

请查找结果的控制台日志。

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

2 个答案: