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表單提交不起作用

回答

相關問題