Question

我在AngularJS中编写了我的第一个应用程序，而且我是javascript的新手。我有一个简单的问题：

如何在角度控制器中使用html表单中的POST值？

我有一个表单（为了便于阅读，我已经删除了css和验证内容）：

<form name="signupForm" novalidate>

                <input type="text" placeholder="Name..." ng-model="name" name="name" required />

                <input type="email" name="email" ng-model="email" placeholder="Email..." required>

                <input type="password" placeholder="Password..." ng-model="password" name="password" required ng-minlength="7" ng-maxlength="50"/>

                <button type="button" ng-click="auth.signup()">Sign Up</button>

</form>

我有一个控制器（没有错误），其功能看起来有点像这样：

    function SignupController($http, $scope, $rootScope, $location) {

          vm.signup = function(name, email, password, onSuccess, onError) {

              $http.post('http://myapi.com/api/authenticate/signup',
              {
                  name: name,
                  email: email,
                  password: password
              }).then(function(response) {
                // etc 
              }); 
}

现在，如何将表单中的值名称，电子邮件，密码分配给控制器中的名称，电子邮件，密码？

感谢。

Answer 1

使用ng-model =＆＃34; email＆＃34;设置输入时，只需调用$ scope.email即可在控制器中访问这些变量值。

案例1：单值

HTML

<input type="text" ng-model="email" />

角度控制器

console.log($scope.email);

案例2：适用于多个值

HTML

<input type="text" ng-model="user.firstname" />
<input type="text" ng-model="user.lastname" />
<input type="text" ng-model="user.email" />

角度控制器

//This will print the all the values (firstname, lastname, email) contains user as object.
console.log($scope.user);

请查看此工作代码段以查看实时示例

＆＃13;

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
  $scope.user = {};
  $scope.signup = function(){
      console.log($scope.user);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <form name="signupForm" ng-controller="FormCtrl" ng-submit="signup()">
  <input type="text" placeholder="Name..." ng-model="user.name" name="name" required />
  <input type="email" name="email" ng-model="user.email" placeholder="Email..." required>
  <input type="password" placeholder="Password..." ng-model="user.password" name="password" required ng-minlength="7" ng-maxlength="50"/>
  <button type="submit">Sign Up</button>
  </form>
</body>

＆＃13;

Answer 2

您需要使用$ scope来绑定ng-model的值，如下所示...

          $scope.signup = function() {
             data={
                      name: $scope.name,
                      email: $scope.email,
                      password: $scope.password
                  }
              $http.post('http://myapi.com/api/authenticate/signup',data).then(function(response) {
                // etc 
                     });

Answer 3

你可以采取三种方式

类型1 使用个人参数

HTML

   <form name="signupForm" novalidate>
     <input type="text" placeholder="Name..." ng-model="name" name="name" required />
     <input type="email" name="email" ng-model="email" placeholder="Email..." required />
     <input type="password" placeholder="Password..." ng-model="password" name="password" ng-minlength="7" ng-maxlength="50" required/>
     <button type="button" ng-click="auth.signup(name, email, password)">Sign Up</button>
  </form>

JS

vm.signup = function(name, email, password) {
      $http.post('http://myapi.com/api/authenticate/signup',
      {
          name: name,
          email: email,
          password: password
      }).then(function(response) { });              
    }

类型2 将对象作为参数

HTML

     <form name="signupForm" novalidate>
       <input type="text" placeholder="Name..." ng-model="user.name" name="name" required />
      <input type="email" name="email" ng-model="user.email" placeholder="Email..." required />
      <input type="password" placeholder="Password..." ng-model="user.password" name="password" ng-minlength="7" ng-maxlength="50" required/>
      <button type="button" ng-click="auth.signup(user)">Sign Up</button>
    </form>

JS

vm.signup = function(data) {
      $http.post('http://myapi.com/api/authenticate/signup', data)
        .then(function(response) {
      });              
  }

类型3 使用$ scope

HTML

     <form name="signupForm" novalidate>
       <input type="text" placeholder="Name..." ng-model="user.name" name="name" required />
       <input type="email" name="email" ng-model="user.email" placeholder="Email..." required />
       <input type="password" placeholder="Password..." ng-model="user.password" name="password" ng-minlength="7" ng-maxlength="50" required/>
       <button type="button" ng-click="auth.signup()">Sign Up</button>
    </form>

JS

vm.signup = function() {
        $http.post('http://myapi.com/api/authenticate/signup', $scope.data)
            .then(function(response) {
      });              
 }

它将以所有这些方式发挥作用。

查看这三者中最佳解决方案的工作演示演示：https://jsbin.com/rimemi/25/edit?html,js,console,output

Answer 4

HTML

<form name="signupForm" novalidate>

            <input type="text" placeholder="Name..." ng-model="user.name" name="name" required />

            <input type=“email" name="email" ng-model="user.email" placeholder="Email..." required>

            <input type="password" placeholder="Password..." ng-model="user.password" name="password" required ng-minlength="7" ng-maxlength="50"/>

            <button type="button" ng-click="auth.signup()">Sign Up</button>

JS

function SignupController($http, $scope, $rootScope, $location) {
   $scope.user={};
  vm.signup = function(name, email, password, onSuccess, onError) {

      $http.post('http://myapi.com/api/authenticate/signup',
      {
          name: $scope.user.name,
          email: $scope.user.email,
          password: $scope.user.password
      }).then(function(response) {
        // etc

Answer 5

在你的HTML中

<form name="signupForm" novalidate ng-submit="vm.signup()">
    <input type="text" placeholder="Name..." ng-model="name" name="vm.user.name" required />
    <input type=“email" name="email" ng-model="vm.user.email" placeholder="Email..." required>
    <input type="password" placeholder="Password..." ng-model="vm.user.password" name="password" required ng-minlength="7" ng-maxlength="50"/>
    <button type="submit">Sign Up</button>
</form>

在您的控制器中

function SignupController($http, $scope, $rootScope, $location) {
   vm.user = {};

   vm.signup = function() {
       // validate here

       // send data
       $http
          .post('http://myapi.com/api/authenticate/signup', vm.user)
          .then(function(response) {
            // handle success 
           });
   };
}

Angular - 在控制器

5 个答案: