2016-01-20 2 views
0

Я работаю над проектом angular-js. Я хочу отправить форму через ng-submit. Но это не работа. Мой Html кодangular ng-submit не работает

<!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> 

Мой шаблон формы

<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> 

/add Мой, /view Рур отлично работает. Но когда я отправляю форму, ng-submit не работает. Форма отправляется напрямую. Я ничего не понимаю в консоли. Где моя проблема ?. Спасибо.

ответ

2

Try intializing $ scope.form:

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

Спасибо. У меня возникла проблема, когда я удаляю атрибут 'action =" # "', все будет нормально. –

1
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); 
    } 
}); 
+0

Спасибо. У меня возникла проблема, когда я удаляю атрибут 'action =" # "', все будет нормально. –

0

На основе кода, который вы представили, вы не намерены использовать $scope.formData. Я думаю, это опечатка, которую вы сделали. Просто измените это, как на $scope.form = {}

$scope.form = {}; // instead of $scope.formData 
Смежные вопросы