AngularJS表单提交不起作用答案

【问题标题】：AngularJS Form Submit not workingAngularJS表单提交不起作用
【发布时间】：2017-02-21 00:19:59
【问题描述】：

首先，我是 Angular 的新手（而不是 JS 专家），但我必须让一些工作正常工作，并且在提交表单时遇到了困难。我需要做的是从 http API 加载一些电影放映时间，然后使用 ng-repeat 将它们填充到页面上的某个容器中。 REST API 将邮政编码作为输入。我最初使用固定的 zip (11111) 加载它，这很有效。 HTML 中的变量似乎正确绑定到控制器中的变量，因为 REST 调用导致页面加载为空，然后电影在 REST 调用完成后一秒钟左右出现。现在我想让用户在文本字段中输入一个新的 ZIP，单击一个按钮，然后我想重新填充电影 []，以便页面重新加载该 div。

我的 Angular 应用看起来像这样

var app = angular.module('showtime', []);
app.controller('showtimeController', function($scope, $http) {

    var foo = this;
    var zip = 11111;

    var movies = [];

    $http.get('https://some.server/movies?location=' + zip).then(function(response) {
        foo.movies = response.data;
    });
});

我有一个 HTML 页面，其中包含一个显示一些电影详细信息的 div，如下所示

<!DOCTYPE html>
<html ng-app="showtime">

<head>
    <title>Showtime</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>


<body data-spy="scroll" data-target=".navbar" data-offset="50" ng-controller="showtimeController as showtime">

... 使用 HTML 表单...

    <div class="col-xs-1" style="padding-top: 8px;">
        <!--<label for="zipusr">Zip:</label>-->
        <form name="zipForm" ng-submit="showtime.submitZip()" novalidate>
            <a ng-href='#here' ng-click='refreshWithZip()'>go</a>
            <input placeholder="Enter ZIP" type="text" class="form-control" id="zip" ng-model="zip">
        </form>
    </div>
    <div class="col-xs-1" style="padding-top: 8px;">
        <button class="btn btn-default btn-sm" type="submit">fetch</button>
    </div>

... 和一些 div 来遍历电影 [] ...

<div id="section1" class="container-fluid">
    <h1>Movies</h1>
    <div class="row">
        <div class="col-sm-6 col-md-4" ng-repeat="biz in showtime.movies.businesses">
            <div class="thumbnail">
                <img class="img-responsive" ng-src="{{biz.image_url}}" alt="..." width="120" height="120" />
                <div class="caption">
                    <h3>{{biz.name}}</h3>
                    <p>{{biz.description}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

任何帮助将不胜感激。

【问题讨论】：

这里有什么问题？你的错误是什么？
我在showtimeController 中没有看到submitZip 方法。

标签： javascript jquery html angularjs forms

【解决方案1】：

添加ng-model绑定变量..

 <input placeholder="Enter ZIP" type="text" class="form-control" ng-model="zipcode" id="zip" ng-model="zip">

现在在控制器中......创建一个函数

$scope.loadNewData = function(){

$http.get('https://some.server/movies?location=' + $scope.zipcode).then(function(response) {
    foo.movies = response.data;
});

};

并在提交时调用loadNewData() 函数

 <button class="btn btn-default btn-sm" type="button" ng-click="loadNewData()">fetch</button>

【讨论】：

这对我有用。谢谢你。我已经有一个绑定到“zip”的ng-model，它恰好与该字段的“id”属性相同。我将其更改为邮政编码并实现了您建议的控制器功能。它完全符合我的要求。谢谢

【解决方案2】：

我在您的控制器定义中没有看到您的 ng-submit 调用的函数 submitZip()。

我认为你应该这样修改你的控制器：

foo.submitZip = function(){
    $http.get('https://some.server/movies?location=' + zip).then(function(response) {
       foo.movies = response.data;
   })

}

如果您想在控制器实例化时保持默认 zip 的负载，请在控制器声明的末尾添加 foo.submitZip()。

希望这会对你有所帮助。

【讨论】：