-1

我从 Angular JS 开始，但在论坛上找不到答案。

我将 Onsen UI 与 Angular 一起使用，我尝试使用 Angular 发出 AJAX 请求，只是提交它不起作用

我的代码：

ons.bootstrap()
.controller('contactController', function($scope) {
  $scope.submit = function () {
 alert('test');
 }
  });

我的表格：

<form ng-controller="contactController" ng-submit="submit()" >

    <p>
      <ons-input id="motif_contact"  placeholder="Motif du contact"
                 float ng-model="contact.motif">
      </ons-input>
    </p>
    <p>
      <ons-input id="email_contact"  placeholder="Adresse e-mail"
                 float ng-model="contact.email">
      </ons-input>
    </p>    <p>
     <textarea class="textarea--transparent" 
               style="border-bottom:1px solid grey;" 
               rows="3" placeholder="Votre message">
     </textarea>
    </p>
    <p>

    </p>
    <p style="margin-top: 30px;">
      <center><ons-button   >Envoyer</ons-button></center>
    </p>



</form>

最后一个问题，只要我是，它如何恢复表单的数据以通过 ajax 发送它？

谢谢

4

1 回答 1

0

这是一个触发提交功能的示例，它在浏览器控制台中控制台记录模型联系人，以检查模型是否正确。您需要向 $http服务器或 api 端点调用 ajax 请求。

我建议为这些人提供服务并注入控制器和简单的调用并发送参数给它。

控制器

ons.bootstrap().controller('contactController', function($scope) {
    var vm = this;
      vm.contact = {
       motif:'',
       email:'',
       message:''
      };
      vm.submit = function () {
      console.log(vm.contact);
    }
  });

html

<form ng-controller="contactController as vm" ng-submit="vm.submit()" >
    <p>
      <ons-input id="motif_contact"  placeholder="Motif du contact"
             float ng-model="vm.contact.motif">
      </ons-input>
    </p>
    <p>
      <ons-input id="email_contact"  placeholder="Adresse e-mail"
             float ng-model="vm.contact.email">
      </ons-input>
    </p>    
    <p>
       <textarea class="textarea--transparent" 
           style="border-bottom:1px solid grey;" 
           rows="3" placeholder="Votre message" ng-model="vm.contact.message">
     </textarea>
    </p>
    <p>

    </p>
    <p style="margin-top: 30px;">
      <center><ons-button>Envoyer</ons-button></center>
    </p>
</form>
于 2017-07-29T17:53:32.433 回答