実施したいこと
①tab1,2を選択すると、doSearchよりAPIにて情報の取得
②取得した情報をng-repeatにてラジオボタンを含むtableとして出力
③ラジオボタンにチェックされた情報と日時をdoActへ情報を渡し、APIにて情報を登録
問題箇所
ng-repeatにてTable及び情報は問題なく出力。
ラジオボタンを選択し実行をしても、情報がJS側の$scope.Idに値が渡らない。console.logで確認済。
※時間については変数sに値が渡る。
※HTMLでng-repeatで表示される結果を直書き(ng-repeatを外す)と
問題なく実行される。
質問事項
どのようにしたらラジオボタンにてチェックした情報(Id)が$scope.Idへ渡るのでしょうか?
HTML
1<div class="container" ng-controller="MainCtrl"> 2 <div class="tab_wrap"> 3 <input id="tab1" type="radio" name="tab_btn" checked> 4 <input id="tab2" type="radio" name="tab_btn"> 5 <div class="tab_area"> 6 <label class="tab1_label" for="tab1" ng-click="doSearch()">test1</label> 7 <label class="tab2_label" for="tab2" ng-click="doSearch()">test2</label> 8 </div> 9 <div class="panel_area"> 10 <div id="panel1" class="tab_panel"> 11 <form name="myForm" ng-submit="doAct()" novalidate> 12 <table class="table"> 13 <tr> 14 <th></th> 15 <th>Name</th> 16 <th>Cost</th> 17 <th>State</th> 18 </tr> 19 <tr ng-repeat="result in results" ng-hide="result.State==1"> 20 <td> 21 <input type="radio" name="Id" value={{result.Id}} id={{result.Id}} ng-model="Id" ><label for={{resul 22t.Id}}></label></input> 23 </td> 24 <td>{{result.Name}}</td> 25 <td>{{result.State}}</td> 26 </tr> 27 </table> 28 <label for="time" style="display: inline">日時:</label> 29 <input id="time" name="time" type="datetime-local" ng-model="time" required /> 30 <span ng-show="myForm.time.$error.datetime-local"></span><br><br> 31 <div class="container"> 32 <input type="submit" value="act" ng-disabled="myForm.$invalid" /> 33 </div> 34 </form> 35 </div> 36 <div id="panel2" class="tab_panel"> 37 <table class="table"> 38 <tr> 39 <th></th> 40 <th>Name</th> 41 <th>Cost</th> 42 <th>State</th> 43 </tr> 44 <tr ng-repeat="result in results" ng-hide="result.State==0"> 45 <td> 46 <input type="radio" name="Id" value={{result.Id}} id={{result.Id}} ng-model="Id" ><label for={{resul 47t.Id}}></label></input> 48 </td> 49 <td>{{result.Name}}</td> 50 <td>{{result.State}}</td> 51 </tr> 52 </table> 53 </div> 54 </div> 55 </div> 56</div> 57
JS
1 .controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 2 3 $scope.doSearch = function() { 4 5 $http({ 6 method : 'GET', 7 url : $url_p 8 }).then(function onSuccess(response) { 9 $scope.results = response.data.result; 10 console.log(status); 11 console.log(response); 12 }, function onError(response) { 13 console.log(status); 14 console.log(response); 15 }); 16 }; 17 18 $scope.doAct = function() { 19 var s = moment($scope.time); 20 var stime = s.format("YYYY-MM-DD HH:mm:ss"); 21 $post_data={"Id":Number($scope.Id),"Content":[{"Type":0,"Time":stime}]} 22 23 $http({ 24 method : 'POST', 25 url : $url_a, 26 headers: { 27 'Content-Type': 'application/json' 28 }, 29 data :$post_data 30 }).then(function onSuccess(response) { 31 $scope.results = response; 32 console.log(status); 33 console.log(response); 34 }, function onError(response) { 35 console.log(status); 36 console.log(response); 37 }); 38 };
あなたの回答
tips
プレビュー