AngularJS表单提交不起作用

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

我的角度应用程序看起来像这样

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

我有一个包含一个显示一些电影细节如下

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

一个div的HTML页面...用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>

任何帮助，将不胜感激。

来源

2016-10-12 rogodeter

这里有什么问题？你的错误是什么？ –

我在'showtimeController'中看不到'submitZip'方法。 –

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

来源

2016-10-12 09:10:18

这对我有用。谢谢。我已经在那里绑定了一个“zip”的ng模型，这恰好与该字段的“id”属性相同。我将其更改为邮政编码并实施了您建议的控制器功能。它正是我想要的。谢谢 – rogodeter

我不不要在你的控制器定义中看到你的ng-subm调用的函数submitZip（）它。

我想你应该修改你的控制器是这样的：如果你想保持你的默认邮政编码的负载时，控制器实例化添加foo.submitZip（）在

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

}

你的控制器的声明结束。

希望这会帮助你。

来源

2016-10-12 09:13:38

AngularJS表单提交不起作用

回答

相关问题