質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

882閲覧

Angurarjs ng-repeat&radio_button&tableの関係性について

naot0toan

総合スコア9

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/08/22 14:40

編集2018/08/22 16:56

実施したいこと
①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 };

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問