使用Angular.js时,如何在提交后保留表单数据?

时间:2013-08-09 13:36:36

标签: ruby-on-rails angularjs

我使用了基本的角度脚本来更新你在我们指定的任何元素的输入字段中输入的内容,实时...

  <!doctype html>
  <html ng-app>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    </head>
    <body>
      <div>
        <label>Name:</label>
        <input type="text" ng-model="yourName" placeholder="Enter a name here">
        <hr>
        <h1>Hello {{yourName}}!</h1>
      </div>
    </body>
  </html>

我是Angular的新手。我在may rails app上使用了这个。但问题是,我使用ng-model的字段会在提交后重置其值。即使设置'value'属性也行不通。我该如何解决这个问题?

我的rails应用程序生成的确切代码:

<form accept-charset="UTF-8" action="/members" class="custom" id="new_member" method="post">

      <div class="row collapse text-field">
        <div class="small-4 columns">
          <h3>Add Member : </h3>
        </div>
        <div class="small-6 columns left inline">
          <h3 class="subheader inline">&nbsp;{{newEntry.name}}</h3>
        </div>
      </div>



        <div class="row collapse text-field">
          <div class="small-3 columns"> 
            <label class="prefix" for="member_name">Full Name</label>
          </div>
          <div class="small-7 columns left">
            <input class="input" id="member_name" name="member[name]" ng-model="newEntry.name" type="text" value="gj" />
          </div>
        </div>


        <div class="row collapse text-field">
          <div class="small-3 columns"> 
            <label class="prefix" for="member_address">Address</label>
          </div>
          <div class="small-9 columns">
            <textarea class="input" height="115" id="member_address" name="member[address]">
            </textarea>
          </div>
        </div>

        <div class="row">
          <div class="small-9 columns" ><input class="button radius" name="commit" type="submit" value="Add Member" /></div>
        </div>
</form>

注意:我没有使用ng-controller。我是Angular的新手。如果需要,请告诉我如何将上述内容转换为控制器。我可以获得该字段的值并将其发送回rails中的表单。它有一个变量。但是Angular继续擦拭它!

Note2 :此问题仅存在于我使用的角度模型的输入字段中..所有其他字段都保留了数据!

1 个答案:

答案 0 :(得分:3)

好的,这不是最好的解决方案,但你可以这样做:

<input type="text" ng-init="yourName = 'Your Value Goes Here'" ng-model="yourName" placeholder="Enter a name here">

应用程序初始化时会运行

ng-init指令,因此您的值将分配给angular的内部“yourName”模型,并相应地在视图中更新。

这可以解决你的问题但不是最好的方法。希望这会让你现在开始 - 我会尽快发布一个更“理想”的解决方案。