角度ng-submit不起作用

Question

I am working on a angular-js project. 我正在研究angular-js项目。 I want to submit a form by ng-submit. 我想通过ng-submit提交表单。 But It is not work. 但这是行不通的。 My Html code is 我的HTML代码是

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AngularJS Routes example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>

<body ng-app="sampleApp" class="container">

<div class="btn-group">
    <a href="/view" class="btn btn-info">List</a>
<a href="/add" class="btn btn-danger">Add New</a>
</div>
<hr>

<div ng-view></div>

<script>
    var module = angular.module("sampleApp", ['ngRoute']);

    module.config(['$routeProvider','$locationProvider',
        function($routeProvider,$locationProvider) {
            $routeProvider.
                    when('/view', {
                        templateUrl: 'template/view/list',
                        controller: 'RouteController'
                    }).
                    when('/add', {
                        templateUrl: 'template/view/new',
                        controller: 'RouteController'
                    }).
                    otherwise({
                        redirectTo: '/view'
                    });
                    $locationProvider.html5Mode(true);
        }]);

    module.controller("RouteController", function($http,$scope, $routeParams) {
        $http.get('welcome/phones').success(function(data) {
          $scope.phones = data;
        });

        $scope.formData = {};

        $scope.saveInfo = function() {

            formData = $scope.form;
            console.log(formData);

            $http.post('welcome/save',formData);
        }
    });
</script>



</body>
</html>

My form template is 我的表单模板是

<form action="#" ng-submit="saveInfo()" method="post" ng-controller="RouteController">
    <div class="form-group">
        <label for="">Product</label>
        <input type="text" name="name" ng-model="form.name" class="form-control">
    </div>
    <div class="form-group">
        <label for="">Price</label>
        <input type="text" name="price" ng-model="form.price" class="form-control">
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-info" value="Submit">
    </div>
</form>

My /add , /view roure work fine. 我的/add ， /view roure工作正常。 But when I submit the form, ng-submit does not work. 但是，当我提交表格时，ng-submit不起作用。 The form submit directly. 表格直接提交。 I does not get any thing in console. 我没有在控制台中得到任何东西。 Where is my problem?. 我的问题在哪里？ Thank you. 谢谢。

Answer 1

Try intializing $scope.form: 尝试初始化$ scope.form：

$scope.formData = {};
$scope.form = {};

Answer 2

module.controller("RouteController", function($http,$scope, $routeParams) {
    $http.get('welcome/phones').success(function(data) {
      $scope.phones = data;
    });

    $scope.formData = {};
    $scope.form = {};
    $scope.saveInfo = function() {

         $scope.formData = $scope.form;
        console.log( $scope.formData);

        $http.post('welcome/save', $scope.formData);
    }
});

Answer 3

Based upon the code you have submitted, you don't intend to use $scope.formData . 根据您提交的代码，您不打算使用$scope.formData 。 I think its a typo you made. 我认为您输入的是错字。 Just change that like to $scope.form = {} 只需将其更改为$scope.form = {}

$scope.form = {}; // instead of $scope.formData

角度ng-submit不起作用

问题描述

3 个解决方案

解决方案1
2 2016-01-20 05:29:19

解决方案2
1 2016-01-20 05:42:36

解决方案3
0 2016-01-20 06:45:39

角度ng-submit不起作用

问题描述

3 个解决方案

解决方案1 2 2016-01-20 05:29:19

解决方案2 1 2016-01-20 05:42:36

解决方案3 0 2016-01-20 06:45:39

解决方案1
2 2016-01-20 05:29:19

解决方案2
1 2016-01-20 05:42:36

解决方案3
0 2016-01-20 06:45:39