Question

我是Angular的新手，所以我正在搞乱Angular 1，

我按照文档说的那样，但是当我点击提交时，它不会触发我在控制器中创建的功能。

所以我在页面的一侧加载我创建的有用的配置文件，它在数据库中加载配置文件。

另一方面，我有一张提交个人资料的表格。我的问题是为什么在我点击提交时没有触发AthleCreateCtrl？

我做错了什么，请帮忙！

<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-md-4 col-lg-4">
        <div class="form-group" ng-controller="athleteCreateCtrl">
          <form ng-submit="addAthlete()">
            <label for="name">Name</label>
            <input id="name" type="text" name="name" class="form-control" ng-model="name" />
            <br  />


            <button type="button" class="btn btn-info" style="width: 100%">Submit</button>
          </form>
        </div>
      </div>
      <div class="col-sm-4 col-md-8 col-lg-8" >
        <div ng-controller="athletesCtrl">
          <div class="row">
            <div ng-repeat="athlete in athletes">
              <span>{{athlete.name}}</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>

这是我的app.js

var app = angular.module('Athlete',['ngRoute']);

app.config(['$routeProvider', function($routeProvider){
    $routeProvider.
        when('/',{
            templateUrl: 'views/Athlete.view.html',
            controller: 'athletesCtrl'
        }).
            when('/',{
        templateUrl: 'views/Athlete.view.html',
        controller: 'athleteCreateCtrl'
    }).
        otherwise({redirectTo: '/'})
}]);

athletes.controller.js

angular.module("Athlete")

.controller('athletesCtrl', ['$scope','$http', function($scope, $http){
    $http.get('/athlete').success(function(data){
        $scope.athletes = data.athletes;
    });
}])
.controller('athleteCreateCtrl', ['$scope', '$http', '$routeParams', function($scope, $http){
    $scope.addAthlete = function(){
        var data = {
            name: $scope.name,
        }
        $http.post('/athlete', data).success(function(data, status) {
            console.log(status);
        });
    }
    $http.get('/athlete').success(function(data){
        $scope.athletes = data.athletes;
    });
}]);

Answer 1

将按钮类型更改为“提交”。

<button type="submit" class="btn btn-info" style="width: 100%">Submit</button>

Angular表单没有提交

1 个答案: