AngularJS Formular Senden funktioniert nicht

Erstens bin ich brandneu bei Angular (und kein JS-Experte), aber ich muss etwas arbeiten und kämpfe mit der Einreichung von Formularen. Was ich tun muss, ist, einige Filmvorführungszeiten von einer http-API zu laden und sie mit ng-repeat in einen Container auf der Seite zu stopfen. Die REST-API verwendet eine Postleitzahl als Eingabe. Ich lade es zunächst mit einem festen Reißverschluss (11111) und das funktioniert. Die Variablen im HTML-Code scheinen korrekt mit den Variablen im Controller verknüpft zu sein, da der REST-Aufruf dazu führt, dass die Seite leer geladen wird und Filme etwa eine Sekunde später erscheinen, wenn der REST-Aufruf abgeschlossen ist. Jetzt möchte ich, dass der Benutzer eine neue PLZ in das Textfeld eingibt, auf eine Schaltfläche klickt und dann nehme ich an, dass die Filme [] neu gefüllt werden, damit die Seite dieses div neu lädt.AngularJS Formular Senden funktioniert nicht

Meine Angular app sieht so etwas wie dies

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

ich eine HTML-Seite, die einen div enthält, die einige Filmdetails zeigt, wie unten

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

... mit einem HTML-Formular ..

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

... und einige divs über die Filme iterieren [] ...

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

Jede Hilfe wäre willkommen.

Quelle

2016-10-12 rogodeter

Was ist hier falsch? Was sind deine Fehler? –

Ich sehe 'submitZip' Methode nicht in' showtimeController '. –

ng-model In dem Variable zu binden ..

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

Jetzt im Controller .. macht eine Funktion

$scope.loadNewData = function(){ 

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

};

und rufen Sie die Funktion loadNewData() anschließend auf

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

Quelle

2016-10-12 09:10:18

Das hat bei mir funktioniert. Vielen Dank. Ich hatte bereits ein ng-Modell, das an "zip" gebunden war, was identisch mit der "id" -Eigenschaft des Feldes ist. Ich habe es in Postleitzahl geändert und die von Ihnen vorgeschlagene Controller-Funktion implementiert. es macht genau das, was ich wollte. Vielen Dank – rogodeter

I don‘ t sehen Sie in Ihrer Controller-Definition die Funktion submitZip(), die von Ihrem ng-subm aufgerufen wird es.

Ich glaube, Sie Ihren Controller auf diese Weise ändern sollten:

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

}

Wenn Sie die Last Ihrer Standard zip wollen halten, wenn der Controller Instanciate eine foo.submitZip hinzufügen wird() bei Ende der Deklaration Ihres Controllers.

Hoffe, das wird Ihnen helfen.

Quelle

2016-10-12 09:13:38

AngularJS Formular Senden funktioniert nicht

Antwort

Verwandte Themen