anglejsを使用して異なるdivタグの値を表示および非表示にする方法はありますか？

ここに私が持っているイメージサンプルです。以下は、下のコードの抜粋です。 https://plnkr.co/edit/ap4p6yGy5gQKc3XuP45f?p=preview anglejsを使用して異なるdivタグの値を表示および非表示にする方法はありますか？

それはをチェックしてを提出している場合はどのように値を表示するために、角を使用することができますか？私はUIのためにthymeleafフレームワークを使用しています。

HTMLコード

<h3> Values to be displayed</h3> 
<ul> 
    <li> 
    <input id="features1" name="features" type="checkbox"/> 
    <input name="_features" type="hidden" value="on" /> 
    <label for="features1">account</label> 
    </li> 
    <li> 
    <input id="features2" name="features" type="checkbox" value="" /> 
    <input name="_features" type="hidden" value="on" /> 
    <label for="features2">bootfile</label> 
    </li> 
    <li> 
    <input id="features3" name="features" type="checkbox" value="" /> 
    <input name="_features" type="hidden" value="on" /> 
    <label for="features3">cmts</label> 
    </li> 
    <li> 
    <input id="features19" name="features" type="checkbox" value="" /> 
    <input name="_features" type="hidden" value="on" /> 
    <label for="features19">info_transaction_time</label> 
    </li> 
    <li> 
    <input id="features20" name="features" type="checkbox" value="" /> 
    <input name="_features" type="hidden" value="on" /> 
    <label for="features20">node</label> 
    </li> 
    <li> 
    <input id="features21" name="features" type="checkbox" value="" /> 
    <input name="_features" type="hidden" value="on" /> 
    <label for="features21">state</label> 
    </li> 
</ul> 

<input type="submit" value="Submit" /> <input type="reset" value="Reset" /> 
    </form> 
</div>

HTMLコードの続き

<div> 
<table th:each="info : ${info}" style="width:100%"> 
    <tr> 
     <td >account</td> 
     <td th:text="${info.account}"></td> 
    </tr> 
    <tr> 
     <td>bootfile</td> 
     <td th:text="${info.bootfile}"></td> 
    </tr> 
    <tr> 
     <td>cmts</td> 
     <td th:text="${info.cmts}"></td> 
    </tr> 
    <tr> 
     <td>info_transaction_time</td> 
     <td th:text="${info.info_transaction_time}"></td> 
    </tr> 
     <tr> 
     <td>node</td> 
     <td th:text="${info.node}"></td> 
    </tr> 
     <tr> 
     <td>billing_state</td> 
     <td th:text="${info.state}"></td> 
    </tr> 
</table> 
</div>

あなたはので、私が使用しカント、私の値が異なるdivタグにある表示する私のコードを見ることができるようにjsが提供する行の表示/非表示の方法です。

例：

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"/> 

<div class="form-group" ng-show="ModelData.Animals"> 


         <label for="FirstName" class="col-md-9"> 
          Are you interested in Animal Liability Coverage? 
         </label> 


         <div style="background-color: white; position: absolute; top: 100px;left: 150px;"class="col-md-6"> 

          <label> 
           <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" 
            value="Y" /> 
           Yes 
           <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" 
            value="N" /> 
           No 
          </label> 

         </div> 
    </div>

作品上記のコードは同じdivタグ内にあるからです。しかし、私のdivタグは別になっています。何ができますか？

出典

2017-01-30 Mike.Chun

これはjsfiddleまたはplunkerを作成することをお勧めします。 – jusopi

あなたはAngularを使ってこれを（本当に簡単に、実際に）使うことは間違いありませんが、私はあなたがそれをやっているはずはないと思っています。両方を満足させるHTMLファイルとJSファイルを作成する価値はありません。 –

@HarrisWeinstein私は自分のUIにデータを表示するためにthymeleafが必要です。私は角度がthymeleafとうまく動作すると思う、私はちょうどそれが異なるdivタグにあるときにそれを実装する方法がわからない –

ng-show="yourVariable"は、複数のdivまたは<tr>タグで使用できます。あなたのHTMLで

：

<input id="features1" name="features" type="checkbox" ng-model="accountChecked" /> 

<input type="submit" value="Submit" ng-click="yourFunction()"/>

そして：あなたのコントローラで

<tr ng-show="yourVariable"> 
     <td >account</td> 
     <td th:text="${info.account}"></td> 
</tr>

：

$scope.yourFunction = function() 
{ 
    if ($scope.accountChecked) { 
     $scope.yourVariable = true; 
    } 
    else { 
     $scope.yourVariable = false; 
    } 
}

出典

2017-01-30 18:35:31

私はそれがチェックされ、提出されたら表示する。ユーザーがチェックボックスをオンにすると、送信をクリックするまで表示されません。 –

これを行うための関数で編集しました。 –

ここで、角度の結果を生成するためにあなたのplunkerとの迅速なティンカーです...しかし、私はそれがThymeleafと一緒にどのように動作するのか分かりません：

EDIT：コントローラー（モデルを処理するためのより良い方法）と、コントローラーがJQueryを使用してサーバーからレンダリングされるフォームの他のフィールドの値を収集する方法の例を含むようにコードを変更しました。

ページが読み込まれた後にサーバーから値を収集する必要がある場合は、$ http要求モジュールに入ります。 AngularチュートリアルをW3Cで入手することをお勧めします。http://www.w3schools.com/angular/default.asp

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script> 
    <script> 
     var app = angular.module('myApp', []); 
     app.controller('myCtrl', function($scope) { 
      $scope.account = $('input#_features1').val() == "on" ? true : false; 
      $scope.bootfile = $('input#_features2').val() == "on" ? true : false; 
     }); 
    </script> 
    </head> 
    <body ng-app="myApp" ng-controller="myCtrl"> 
    <div> 
     <form> 
     <h3> Values to be displayed</h3> 
     <ul> 
      <li> 
      <input id="features1" type="checkbox" ng-model="account"/> 
      <input id="_features1" type="hidden" value="on"/> 
      <label for="features1">account</label> 
      </li> 
      <li> 
      <input id="features2" type="checkbox" ng-model="bootfile" /> 
      <input id="_features2" type="hidden" value="off"/> 
      <label for="features2">bootfile</label> 
      </li> 
     </ul> 
     <input type="submit" value="Submit" /> 
     <input type="reset" value="Reset" /> 
     </form> 
    </div> 
    <div> 
     <table th:each="info : ${info}" style="width:100%"> 
     <tr> 
      <td >account</td> 
      <td>{{!!account}}</td> 
     </tr> 
     <tr> 
      <td>bootfile</td> 
      <td>{{!!bootfile}}</td> 
     </tr> 
     </table> 
    </div> 
    </body> 
</html>

出典

2017-01-30 18:51:15 Paurian

値がfalseからtrueに変更されているのがわかりますが、チェックして送信したときに値を表示するにはどうすればいいですか？だけでなく、チェック。 –

提出後（または提出前にチェック）に値をチェックする方法を示すコードを変更しました。 Angularはクライアントサイドのフレームワークなので、クライアントはサーバー側の値を取得しています。サーバーによってレンダリングされた場合は、隠れた入力（例のように）から取得できます。それがWebサービスの呼び出しであれば、それはまったく別の生き物です。 Angular（私の答えが示すように）を学びたいと思うでしょう。 – Paurian

さて、両方のボックスにチェックを入れると、それは真実になりますが、リセットを押すとどうなりますか？値は真実のままです。 –

anglejsを使用して異なるdivタグの値を表示および非表示にする方法はありますか？

答えて

関連する問題