javascript - AngularJS 表单提交不起作用-6ren

javascript - AngularJS 表单提交不起作用

转载作者：行者123 更新时间：2023-12-03 05:54:34

25

4

首先，我是 Angular 的新手(不是 JS 专家)，但我必须让一些东西发挥作用，并且在表单提交方面遇到困难。我需要做的是从 http API 加载一些电影放映时间，并使用 ng-repeat 将它们填充到页面上的某个容器中。 REST API 将邮政编码作为输入。我最初使用固定的 zip (11111) 加载它，这有效。 HTML 中的变量似乎已正确绑定(bind)到 Controller 中的变量，因为 REST 调用导致页面加载为空，然后在 REST 调用完成后大约一秒后出现电影。现在我想让用户在文本字段中输入一个新的 ZIP，单击一个按钮，然后我想重新填充 movie[]，以便页面将重新加载该 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>

如有任何帮助，我们将不胜感激。

最佳答案

添加ng-model来绑定(bind)变量..

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

现在在 Controller 中..创建一个函数

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

关于javascript - AngularJS 表单提交不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39994508/

25

4

0

文章推荐： youtube - 如何构建一个简单的视频流服务器？

文章推荐： list - 获取 Haskell 列表中下一个最小元素的索引

文章推荐： android - cordova构建失败:Android

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - AngularJS 表单提交不起作用