输入提交按钮上的ui-sref?

时间:2016-02-23 01:50:41

标签: javascript html angularjs forms angular-ui-router

我是Angularjs的新手,我正在创建一个包含多个视图的表单(使用ui-router)。每个视图都将包含要填写的表单的不同数据,因此在填写视图时,我不想只是单击锚标记并继续下一个视图。我希望它也像一个输入提交按钮,它具有一些验证功能。我该怎么做?这就是我到目前为止所做的:

<section class="progress-bar">
<ul class="btn-group btn-group-justified" role="group">
  <a ui-sref=".first" ui-sref-active="active" class="btn list-group-item">First</a>
  <a ui-sref=".second" ui-sref-active="active" class="btn list-group-item">Second</a>
  <a ui-sref=".third" ui-sref-active="active" class="btn list-group-item">Third</a></ul>
</section>
<div>
  <form class="form" autocomplete="on" id="myForm" ng-submit="submitForm()">
    <div ui-view></div>
  </form>

不同的视图底部会有一个a标记,我希望它能像输入提交按钮那样有一些验证功能:

<a ui-sref="form.second" class="btn btn-block btn-info" id="next1">Next</a>

最终视图将提交输入:

<input id="submit" type="submit">

谢谢!

编辑:我想只使用HTML5提供的默认验证。就像输入提交一样,没有任何额外的功能。

1 个答案:

答案 0 :(得分:2)

您可以使用<button onClick="myfun()">Get the div height</button> <p id="demo"></p> <div id="myDiv"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et neque eget mi aliquam malesuada. Vivamus purus augue, vulputate vel mi nec, tincidunt porta libero. Pellentesque scelerisque vulputate auctor. Integer nec tincidunt sapien. Pellentesque quis velit lorem. Fusce faucibus nec odio nec fringilla. Etiam mattis, massa nec eleifend faucibus, nunc mauris eleifend justo, auctor congue dolor sem eu turpis. Phasellus tincidunt urna cursus nibh commodo ultricies. </p><p> Curabitur ac tempor ex, quis tristique mauris. Morbi nisi est, vestibulum id viverra non, hendrerit et dolor. Vivamus nibh lorem, tempus at leo sit amet, bibendum elementum dui. Mauris viverra sollicitudin lacinia. Donec sed ante nulla. Quisque tincidunt tincidunt augue. Fusce ultricies, ante non mollis pretium, libero odio rutrum nisi, vitae iaculis quam ligula eu diam. Nullam non nulla dolor. Nulla blandit magna iaculis cursus accumsan. Curabitur ac nunc nec enim mattis molestie. Nam imperdiet quam id lorem gravida tristique. Phasellus est nibh, pulvinar ac ex sit amet, sollicitudin mattis sem. Praesent maximus sit amet augue sit amet sodales. Fusce placerat auctor odio, a vulputate tellus ultricies nec. Cras convallis eros ac ornare suscipit. Suspendisse gravida laoreet nisl, at tristique nibh cursus sit amet. </p><p> Suspendisse pellentesque quis massa et convallis. Proin laoreet bibendum nunc, ac fringilla dolor pretium eu. Maecenas nec diam mattis, rutrum magna sed, varius tellus. Pellentesque et sagittis risus, a laoreet neque. Phasellus sodales dapibus massa ac mattis. Phasellus sem eros, malesuada a accumsan sed, dapibus vel urna. Pellentesque eu purus odio. Mauris ligula lorem, tristique imperdiet porta vel, ultricies nec turpis. Sed cursus finibus tempor. Aenean elit velit, posuere id nibh sit amet, volutpat consequat arcu. Proin in eros ipsum. Aliquam at turpis non urna congue accumsan. </p><p> Vivamus tincidunt at ante eu imperdiet. Donec a dictum turpis, in pulvinar turpis. Proin et feugiat quam. Etiam sed dapibus elit, ut laoreet lorem. Duis mollis tortor at erat lacinia, id venenatis tortor eleifend. Pellentesque non eros sit amet lacus condimentum suscipit. Phasellus ornare eu elit in placerat. Nunc sed ultrices nunc. Nunc ut lacinia est. Pellentesque placerat porta mi, nec dapibus ante tempor a. </p><p> Donec at tortor vel eros lobortis feugiat. Fusce commodo sodales libero auctor volutpat. Phasellus imperdiet finibus erat, eget viverra libero viverra ut. Suspendisse non venenatis est, eget pretium urna. Integer convallis neque nec eros rutrum, id hendrerit ipsum pharetra. Etiam dictum elementum magna, elementum semper lectus fermentum et. Nam sagittis sagittis neque quis semper. Morbi hendrerit libero nec elementum elementum. Donec hendrerit tincidunt arcu, vel bibendum velit suscipit ac. Mauris dolor enim, semper eget libero eget, vulputate accumsan massa. Integer rhoncus egestas tellus et porta. Pellentesque fringilla ac risus nec lacinia. Morbi blandit orci tincidunt libero volutpat, at eleifend augue imperdiet. Nunc non blandit massa, et pharetra massa. Curabitur aliquet augue et elit placerat commodo sit amet id ante. </p> </div>指令并绑定验证函数,如果ng-click则使用is_vaild is True进行重定向。

见:ngClick; $state