[英]AngularJS Form Submit not working
首先,我是Angular的新手(而不是JS專家),但是我必須工作一些,並且在表單提交方面很掙扎。 我需要做的是從http API加載一些電影放映時間,然后使用ng-repeat將它們填充到頁面上的某些容器中。 REST API將郵政編碼作為輸入。 我最初使用固定的拉鏈(11111)加載它,並且可以正常工作。 HTML中的變量似乎已正確綁定到控制器中的變量,因為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;
});
});
我有一個包含div的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
綁定變量..
<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>
我在您的控制器定義中沒有看到您的ng-submit調用的函數commitZip()。
我認為您應該這樣修改控制器:
foo.submitZip = function(){
$http.get('https://some.server/movies?location=' + zip).then(function(response) {
foo.movies = response.data;
})
}
如果要在控制器實例化時保留默認zip的負載,請在控制器聲明的末尾添加foo.submitZip()。
希望這會幫助你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.