【问题标题】:Angular form not submitting角度表单未提交
【发布时间】:2018-09-15 11:08:02
【问题描述】:

我是 Angular 的新手,所以我在使用 Angular 1,

我按照文档所说的,但是当我点击提交时,它不会触发我在控制器中制作的功能。

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

另一方面,我有一个提交个人资料的表格。我的问题是为什么当我点击提交时没有触发运动员创建Ctrl?

我做错了什么,请帮忙!

<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;
    });
}]);

【问题讨论】:

  • &lt;button type="button" -> &lt;button type="submit"
  • &lt;input type="submit"&gt;

标签: javascript angularjs


【解决方案1】:

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

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

【讨论】:

  • 另外一个问题,我提出post请求后如何查看显示新数据?
  • @spaceDog 你的$http.post 请求返回data,用它来更新一些东西,例如$scope.athletes.push(data)。问题是你有两个独立的控制器(我不知道为什么),所以试试sharing the data between them with services/factories
猜你喜欢
  • 1970-01-01
  • 2018-10-26
  • 2015-07-03
  • 2018-10-22
  • 1970-01-01
  • 1970-01-01
  • 2018-03-19
  • 1970-01-01
  • 2017-06-12
相关资源
最近更新 更多