{"absolute_url": "/jbmckee/angular-contact-form/", "blog_post": false, "code": "<ion-view title=\"Contact\">\n\n  <ion-content class=\"has-header padding\">\n    <div class=\"bar bar-positive\" style=\"margin-bottom: 8px; position: relative;\" ng-show=\"result\">{{result}}</div>\n    <form ng-submit=\"sendContact()\">\n      <div class=\"list\">\n        <label class=\"item item-input item-stacked-label\">\n          <span class=\"input-label\">First Name</span>\n          <input type=\"text\" ng-model=\"contact.first_name\" placeholder=\"Enter First Name\">\n        </label>\n        <label class=\"item item-input item-stacked-label\">\n          <span class=\"input-label\">Last Name</span>\n          <input type=\"text\" ng-model=\"contact.last_name\" placeholder=\"Enter Last Name\">\n        </label>\n        <label class=\"item item-input item-stacked-label\">\n          <span class=\"input-label\">Phone #</span>\n          <input type=\"text\" ng-model=\"contact.phone\" placeholder=\"Enter Phone Number\">\n        </label>\n        <label class=\"item item-input item-stacked-label\">\n          <span class=\"input-label\">Email</span>\n          <input type=\"text\" ng-model=\"contact.email\" placeholder=\"Enter Email\">\n        </label>\n        <label class=\"item item-input  item-stacked-label item-select\">\n          <select ng-model=\"contact.reason\"\n                  ng-init=\"contact.reason = reasons[0]\"\n                  ng-options=\"reason as reason.name for reason in reasons track by reason.id\">\n          </select>\n        </label>\n        <label class=\"item item-input item-stacked-label\">\n          <span class=\"input-label\">Message</span>\n          <input type=\"text\" ng-model=\"contact.message\" placeholder=\"Enter any comments\">\n        </label>\n        <padding>\n          <button class=\"button button-balanced button-block\" ng-disabled=\"!contact.email || !contact.first_name || !contact.last_name\">\n            Send\n          </button>\n        </padding>\n      </div>\n    </form>\n  </ion-content>\n</ion-view>", "created": "2016-12-14T14:07:28.506029", "description": "", "description_rendered": "", "embed_url": "https://snipt.net/embed/2480bde8e5183790a188d09a20f0be71/", "full_absolute_url": "/jbmckee/angular-contact-form/", "id": 146988, "lexer": "text", "line_count": 41, "log_entries": [], "meta": "", "modified": "2026-03-30T16:13:28.003718", "publish_date": null, "raw_url": "/raw/2480bde8e5183790a188d09a20f0be71/", "resource_uri": "/api/public/snipt/146988/", "slug": "angular-contact-form", "stylized": "<table class=\"highlighttable\"><tr><td class=\"linenos\"><div class=\"linenodiv\"><pre><a href=\"#L-1\"> 1</a>\n<a href=\"#L-2\"> 2</a>\n<a href=\"#L-3\"> 3</a>\n<a href=\"#L-4\"> 4</a>\n<a href=\"#L-5\"> 5</a>\n<a href=\"#L-6\"> 6</a>\n<a href=\"#L-7\"> 7</a>\n<a href=\"#L-8\"> 8</a>\n<a href=\"#L-9\"> 9</a>\n<a href=\"#L-10\">10</a>\n<a href=\"#L-11\">11</a>\n<a href=\"#L-12\">12</a>\n<a href=\"#L-13\">13</a>\n<a href=\"#L-14\">14</a>\n<a href=\"#L-15\">15</a>\n<a href=\"#L-16\">16</a>\n<a href=\"#L-17\">17</a>\n<a href=\"#L-18\">18</a>\n<a href=\"#L-19\">19</a>\n<a href=\"#L-20\">20</a>\n<a href=\"#L-21\">21</a>\n<a href=\"#L-22\">22</a>\n<a href=\"#L-23\">23</a>\n<a href=\"#L-24\">24</a>\n<a href=\"#L-25\">25</a>\n<a href=\"#L-26\">26</a>\n<a href=\"#L-27\">27</a>\n<a href=\"#L-28\">28</a>\n<a href=\"#L-29\">29</a>\n<a href=\"#L-30\">30</a>\n<a href=\"#L-31\">31</a>\n<a href=\"#L-32\">32</a>\n<a href=\"#L-33\">33</a>\n<a href=\"#L-34\">34</a>\n<a href=\"#L-35\">35</a>\n<a href=\"#L-36\">36</a>\n<a href=\"#L-37\">37</a>\n<a href=\"#L-38\">38</a>\n<a href=\"#L-39\">39</a>\n<a href=\"#L-40\">40</a>\n<a href=\"#L-41\">41</a></pre></div></td><td class=\"code\"><div class=\"highlight\"><pre><span></span><span id=\"L-1\"><a name=\"L-1\"></a>&lt;ion-view title=&quot;Contact&quot;&gt;\n</span><span id=\"L-2\"><a name=\"L-2\"></a>\n</span><span id=\"L-3\"><a name=\"L-3\"></a>  &lt;ion-content class=&quot;has-header padding&quot;&gt;\n</span><span id=\"L-4\"><a name=\"L-4\"></a>    &lt;div class=&quot;bar bar-positive&quot; style=&quot;margin-bottom: 8px; position: relative;&quot; ng-show=&quot;result&quot;&gt;{{result}}&lt;/div&gt;\n</span><span id=\"L-5\"><a name=\"L-5\"></a>    &lt;form ng-submit=&quot;sendContact()&quot;&gt;\n</span><span id=\"L-6\"><a name=\"L-6\"></a>      &lt;div class=&quot;list&quot;&gt;\n</span><span id=\"L-7\"><a name=\"L-7\"></a>        &lt;label class=&quot;item item-input item-stacked-label&quot;&gt;\n</span><span id=\"L-8\"><a name=\"L-8\"></a>          &lt;span class=&quot;input-label&quot;&gt;First Name&lt;/span&gt;\n</span><span id=\"L-9\"><a name=\"L-9\"></a>          &lt;input type=&quot;text&quot; ng-model=&quot;contact.first_name&quot; placeholder=&quot;Enter First Name&quot;&gt;\n</span><span id=\"L-10\"><a name=\"L-10\"></a>        &lt;/label&gt;\n</span><span id=\"L-11\"><a name=\"L-11\"></a>        &lt;label class=&quot;item item-input item-stacked-label&quot;&gt;\n</span><span id=\"L-12\"><a name=\"L-12\"></a>          &lt;span class=&quot;input-label&quot;&gt;Last Name&lt;/span&gt;\n</span><span id=\"L-13\"><a name=\"L-13\"></a>          &lt;input type=&quot;text&quot; ng-model=&quot;contact.last_name&quot; placeholder=&quot;Enter Last Name&quot;&gt;\n</span><span id=\"L-14\"><a name=\"L-14\"></a>        &lt;/label&gt;\n</span><span id=\"L-15\"><a name=\"L-15\"></a>        &lt;label class=&quot;item item-input item-stacked-label&quot;&gt;\n</span><span id=\"L-16\"><a name=\"L-16\"></a>          &lt;span class=&quot;input-label&quot;&gt;Phone #&lt;/span&gt;\n</span><span id=\"L-17\"><a name=\"L-17\"></a>          &lt;input type=&quot;text&quot; ng-model=&quot;contact.phone&quot; placeholder=&quot;Enter Phone Number&quot;&gt;\n</span><span id=\"L-18\"><a name=\"L-18\"></a>        &lt;/label&gt;\n</span><span id=\"L-19\"><a name=\"L-19\"></a>        &lt;label class=&quot;item item-input item-stacked-label&quot;&gt;\n</span><span id=\"L-20\"><a name=\"L-20\"></a>          &lt;span class=&quot;input-label&quot;&gt;Email&lt;/span&gt;\n</span><span id=\"L-21\"><a name=\"L-21\"></a>          &lt;input type=&quot;text&quot; ng-model=&quot;contact.email&quot; placeholder=&quot;Enter Email&quot;&gt;\n</span><span id=\"L-22\"><a name=\"L-22\"></a>        &lt;/label&gt;\n</span><span id=\"L-23\"><a name=\"L-23\"></a>        &lt;label class=&quot;item item-input  item-stacked-label item-select&quot;&gt;\n</span><span id=\"L-24\"><a name=\"L-24\"></a>          &lt;select ng-model=&quot;contact.reason&quot;\n</span><span id=\"L-25\"><a name=\"L-25\"></a>                  ng-init=&quot;contact.reason = reasons[0]&quot;\n</span><span id=\"L-26\"><a name=\"L-26\"></a>                  ng-options=&quot;reason as reason.name for reason in reasons track by reason.id&quot;&gt;\n</span><span id=\"L-27\"><a name=\"L-27\"></a>          &lt;/select&gt;\n</span><span id=\"L-28\"><a name=\"L-28\"></a>        &lt;/label&gt;\n</span><span id=\"L-29\"><a name=\"L-29\"></a>        &lt;label class=&quot;item item-input item-stacked-label&quot;&gt;\n</span><span id=\"L-30\"><a name=\"L-30\"></a>          &lt;span class=&quot;input-label&quot;&gt;Message&lt;/span&gt;\n</span><span id=\"L-31\"><a name=\"L-31\"></a>          &lt;input type=&quot;text&quot; ng-model=&quot;contact.message&quot; placeholder=&quot;Enter any comments&quot;&gt;\n</span><span id=\"L-32\"><a name=\"L-32\"></a>        &lt;/label&gt;\n</span><span id=\"L-33\"><a name=\"L-33\"></a>        &lt;padding&gt;\n</span><span id=\"L-34\"><a name=\"L-34\"></a>          &lt;button class=&quot;button button-balanced button-block&quot; ng-disabled=&quot;!contact.email || !contact.first_name || !contact.last_name&quot;&gt;\n</span><span id=\"L-35\"><a name=\"L-35\"></a>            Send\n</span><span id=\"L-36\"><a name=\"L-36\"></a>          &lt;/button&gt;\n</span><span id=\"L-37\"><a name=\"L-37\"></a>        &lt;/padding&gt;\n</span><span id=\"L-38\"><a name=\"L-38\"></a>      &lt;/div&gt;\n</span><span id=\"L-39\"><a name=\"L-39\"></a>    &lt;/form&gt;\n</span><span id=\"L-40\"><a name=\"L-40\"></a>  &lt;/ion-content&gt;\n</span><span id=\"L-41\"><a name=\"L-41\"></a>&lt;/ion-view&gt;\n</span></pre></div>\n</td></tr></table>", "tags": [{"absolute_url": "/public/tag/ionic/", "id": 15, "name": "ionic", "resource_uri": "/api/public/tag/15/", "snipts": "/api/public/snipt/?tag=15"}, {"absolute_url": "/public/tag/angular/", "id": 16, "name": "angular", "resource_uri": "/api/public/tag/16/", "snipts": "/api/public/snipt/?tag=16"}], "title": "Angular contact form", "user": {"absolute_url": "/jbmckee/", "email_md5": "f4da96308b6db1b0b19738a7c105d3da", "id": 1, "resource_uri": "/api/public/user/1/", "snipts": "/api/public/snipt/?user=1", "snipts_count": 72, "username": "jbmckee"}}