フォームデータを動的に表示する

Question

私は自分のレールアプリケーションで新しい仕事を持っています。私は通常の形のスプルトンを持っています：

<%= simple_form_for(@workout, html: { class: 'form-horizontal' }) do |f| %> 
    <%= f.input :date, label: "Date"%> 
    <%= f.input :workout, label: "What training?", :collection => ["Running","Swimming","Cycling"]%> 
    <%= f.input :mood, label: "Your mood", :collection => ["Great","Good","Bad"]%> 
    <%= f.input :weather, label: "Weather:", :collection => ["Sunny","Rainy","Cloudy"] %> 
    <%= f.input :intensity, label: "Intensity. Low is 90-120BPM. Normal is 120-155BPM. High is 155+BPM.", :collection => ["High","Normal","Low"]%> 
    <%= f.input :length, label: "Time in minutes:", input_html: { class: "form-control" }%> 
    <%= f.input :distance, label: "Distance in kilometers:", input_html: { class: "form-control" }%> 
    <%= f.input :comment, label: "Your comment to this training session:", input_html: { class: "form-control" }%> 
    <br> 
    <%= f.button :submit %> 
<% end %> 

そして今、私はangularjsを使ってデータを動的に表示することを考えました。つまり、ユーザーがフォームを記入すると、ウェブサイトのある場所にデータを表示したいので、ユーザーはフォームを送信する前に見て回ることができます。フォーム例：

<div class="col-sm-6 col-xs-6 new_details"> 
     <%= render 'form' %> 
    </div> 
    <div class="col-sm-6 col-xs-6"> 
     <!-- ANGULAR CODE --> 
    </div> 

生成されたHTMLコード：

<div class="col-sm-6 col-xs-6 new_details"> 
     <form class="simple_form form-horizontal" novalidate="novalidate" id="new_workout" action="/workouts" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="/n/2EHIRSt4pXrta+ABebjQsJXZllHkWGg/PlJek2u5bfA6EHM5v+8wT13+lrw+dGS+YXyQx3YffD/SHpCvFeg==" /> 
    <div class="form-group datetime optional workout_date"><label class="control-label datetime optional" for="workout_date_1i">Date</label><div class="form-inline"><select id="workout_date_1i" name="workout[date(1i)]" class="form-control datetime optional"> 
<option value="2012">2012</option> 
<option value="2013">2013</option> 
<option value="2014">2014</option> 
<option value="2015">2015</option> 
<option value="2016">2016</option> 
<option value="2017" selected="selected">2017</option> 
<option value="2018">2018</option> 
<option value="2019">2019</option> 
<option value="2020">2020</option> 
<option value="2021">2021</option> 
<option value="2022">2022</option> 
</select> 
<select id="workout_date_2i" name="workout[date(2i)]" class="form-control datetime optional"> 
<option value="1">January</option> 
<option value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5" selected="selected">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option> 
</select> 
<select id="workout_date_3i" name="workout[date(3i)]" class="form-control datetime optional"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12" selected="selected">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
</select> 
&mdash; <select id="workout_date_4i" name="workout[date(4i)]" class="form-control datetime optional"> 
<option value="00">00</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
<option value="05">05</option> 
<option value="06">06</option> 
<option value="07">07</option> 
<option value="08">08</option> 
<option value="09">09</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16" selected="selected">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
</select> 
: <select id="workout_date_5i" name="workout[date(5i)]" class="form-control datetime optional"> 
<option value="00">00</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
<option value="05">05</option> 
<option value="06">06</option> 
<option value="07">07</option> 
<option value="08">08</option> 
<option value="09">09</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
<option value="32">32</option> 
<option value="33">33</option> 
<option value="34">34</option> 
<option value="35">35</option> 
<option value="36">36</option> 
<option value="37">37</option> 
<option value="38">38</option> 
<option value="39">39</option> 
<option value="40">40</option> 
<option value="41">41</option> 
<option value="42">42</option> 
<option value="43">43</option> 
<option value="44">44</option> 
<option value="45" selected="selected">45</option> 
<option value="46">46</option> 
<option value="47">47</option> 
<option value="48">48</option> 
<option value="49">49</option> 
<option value="50">50</option> 
<option value="51">51</option> 
<option value="52">52</option> 
<option value="53">53</option> 
<option value="54">54</option> 
<option value="55">55</option> 
<option value="56">56</option> 
<option value="57">57</option> 
<option value="58">58</option> 
<option value="59">59</option> 
</select> 
</div></div> 
    <div class="form-group select optional workout_workout"><label class="control-label select optional" for="workout_workout">What training?</label><select class="form-control select optional" name="workout[workout]" id="workout_workout"><option value=""></option> 
<option value="Running">Running</option> 
<option value="Swimming">Swimming</option> 
<option value="Cycling">Cycling</option></select></div> 
    <div class="form-group select optional workout_mood"><label class="control-label select optional" for="workout_mood">Your mood</label><select class="form-control select optional" name="workout[mood]" id="workout_mood"><option value=""></option> 
<option value="Great">Great</option> 
<option value="Good">Good</option> 
<option value="Bad">Bad</option></select></div> 
    <div class="form-group select optional workout_weather"><label class="control-label select optional" for="workout_weather">Weather:</label><select class="form-control select optional" name="workout[weather]" id="workout_weather"><option value=""></option> 
<option value="Sunny">Sunny</option> 
<option value="Rainy">Rainy</option> 
<option value="Cloudy">Cloudy</option></select></div> 
    <div class="form-group select optional workout_intensity"><label class="control-label select optional" for="workout_intensity">Intensity. Low is 90-120BPM. Normal is 120-155BPM. High is 155+BPM.</label><select class="form-control select optional" name="workout[intensity]" id="workout_intensity"><option value=""></option> 
<option value="High">High</option> 
<option value="Normal">Normal</option> 
<option value="Low">Low</option></select></div> 
    <div class="form-group integer optional workout_length"><label class="control-label integer optional" for="workout_length">Time in minutes:</label><input class="form-control numeric integer optional form-control" type="number" step="1" name="workout[length]" id="workout_length" /></div> 
    <div class="form-group decimal optional workout_distance"><label class="control-label decimal optional" for="workout_distance">Distance in kilometers:</label><input class="form-control numeric decimal optional form-control" type="number" step="any" name="workout[distance]" id="workout_distance" /></div> 
    <div class="form-group text optional workout_comment"><label class="control-label text optional" for="workout_comment">Your comment to this training session:</label><textarea class="form-control text optional form-control" name="workout[comment]" id="workout_comment"> 
</textarea></div> 
    <br> 
    <input type="submit" name="commit" value="Create Workout" class="btn btn-default" /> 
</form> 
    </div> 

任意のアイデアとヒント？

Answer 1

入力にng-model を割り当てると、値に角度でアクセスできます。

ngModelディレクティブは、このディレクティブによって作成され、露出さNgModelControllerを使用してスコープのプロパティへの入力、SELECT、TEXTAREA（またはカスタムフォームコントロール）と結合します。 <select>ng-model="trainingType"を与え例えば

は、あなたがその値にアクセスできるようになり、その値が更新されるたびに変更されます。 http://plnkr.co/edit/ZRGtiPvCdqQffj3rHOtd?p=preview

---

1：https://docs.angularjs.org/api/ng/directive/ngModel