anglejsのコントローラから選択したドロップダウンデータを送信するには

私は12列のテーブルを持っています。各列は、「はい」と「いいえ」の値として1つのドロップダウンを持ちます。ドロップダウンのデフォルト値は「はい」です。送信ボタンをクリックしながら、選択したデータを送信したい。anglejsのコントローラから選択したドロップダウンデータを送信するには

<!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> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 
    <td><select> 
 
    \t <option>Yes</option> 
 
    \t <option>No</option> 
 
    </select></td> 
 

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

これが私のテーブルです。 getやpostメソッドを使って選択したデータを送るanglejsコードを書く方法。

出典

2017-05-18 sathish kumar

これを行う1つの方法は、オブジェクトを配列に追加し、その配列でng-repeatを使用してテーブルにオプションを追加し、選択したオプションを各オブジェクトのvalueプロパティにバインドすることです。ここで

を例

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> 
 
     \t  <option value="No">No</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <button ng-click="saveMonthData()">Post</button> 
 
</body> 
 

 
</html>

出典

2017-05-18 19:48:37

ありがとうございます。これは私が期待したものです –

だあなたは12ヶ月を作成して、スコープの変数を使用して管理することができます。角度jを使用している場合、accosiated変数の2方向データバインディングが機能します。

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

結果のためのコンソールログを見つけてください。

出典

2017-05-18 20:10:18 Rahul

anglejsのコントローラから選択したドロップダウンデータを送信するには

答えて

関連する問題