Question

我的rails应用程序中有一些新任务。我拥有正常形式的场景：

<%= 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 ¹分配给您的输入将允许Angular访问这些值。

ngModel指令使用NgModelController将输入，select，textarea（或自定义表单控件）绑定到作用域上的属性，NgModelController由此指令创建并公开。

例如，提供<select>一个ng-model="trainingType"将允许您访问其值，并且每当更新值时都会更改。

<select ng-model="trainingType">
          <option value=""></option>
          <option value="Running">Running</option>
          <option value="Swimming">Swimming</option>
          <option value="Cycling">Cycling</option>
</select>

<p>Current value is: {{trainingType}}</p>

以下是使用您提供的部分表单数据的plunker演示：http://plnkr.co/edit/ZRGtiPvCdqQffj3rHOtd?p=preview

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

动态显示表单数据

1 个答案: