Es gibt etwas, das ich nicht über $ http-Service in eckigen bekommen

Mein Code ist nicht sehr einfach, weil ich einige Eigenschaften zwischen den Controllern teilen musste, aber das Problem liegt nicht dort. Ich versuche, einen Ajax-Aufruf hinzuzufügen (um wie all die anderen Sachen zu trainieren) und ich bekomme ein leeres Array in der Auswahl-Option im HTML-Layout, wo es den Inhalt des JSons bekommen soll und das Auswahlmenü als Ergebnis füllen soll .

Hier ist mein javascript:

angular.module('greetings', []) 
.service("Addcontent", function($http){ 
    this.name = "Nome"; 
    this.familyName = "Cognome"; 
    me = this; 
    me.tipi= []; 
    this.ajaxCall = $http.get("http://localhost:8090/my-site/data.json").success(function(data) { 
     console.log(data); 
     me.tipi = data; 
     console.log(me.tipi); 
    }).error(function(){ 
     console.log("error"); 
    }); 
    this.selectedOption = this.tipi[0]; 
}) 
.controller('GreetingsController', function($http, Addcontent) { 
    this.name = Addcontent.name; 
    this.familyName = Addcontent.familyName; 
    this.tipi = Addcontent.tipi; 
    this.selectedOption = Addcontent.selectedOption; 
}).controller("addContentController", function($scope, $window, $http, Addcontent){ 
     this.name = Addcontent.name; 
     this.familyName = Addcontent.familyName; 
     this.tipi = Addcontent.tipi; 
     this.selectedOption = Addcontent.selectedOption; 
     this.greet = function greet() { 
      this.name = $scope.$parent.greeting.name 
      this.familyName = $scope.$parent.greeting.familyName 
      this.selectedOption = $scope.$parent.greeting.selectedOption 
    }; 
});

Und hier ist mein html:

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="greetings.js"></script> 
</head> 
<body> 
<h1>Greetings</h1> 
<div ng-app="greetings" ng-controller="GreetingsController as greeting"> 
    <b>Greetings:</b> 
    <div> 
    Name: <input type="text" min="0" ng-model="greeting.name" required > 
    </div> 
    <div> 
    FamilyName: <input type="text" ng-model="greeting.familyName" required > 
    <select 
    data-ng-options="c for c in greeting.tipi" data-ng-model="greeting.selectedOption"> 
     <!--<option ng-repeat="c in greeting.tipi">{{c}}</option>--> 
    </select> 
    </div> 
    <br/> 
    <span> 
    {{greeting.selectedOption}} {{greeting.name}} {{greeting.familyName}} 
    </span> 
    <div> 
    <b>Greeting:</b> 
    <span ng-controller="addContentController as addcontentCtrl"> 
     {{addcontentCtrl.selectedOption}} {{addcontentCtrl.name}} {{addcontentCtrl.familyName}} 
     <!--<form ng-submit="greeting.update(greeting.selectedOption)"> 
     <input type="submit" value="Greeting"> 
     </form>--> 
     <button class="btn" ng-click="addcontentCtrl.greet(addcontentCtrl.selectedOption)">Greet</button> 
     <br/> 
    </span> 
    </div> 
</div> 
</body> 
</html>

die json verwendet werden soll:

[{"Hello":"1"}, 
{"Good Morning":"2"}, 
{"Good Afternoon":"3"}, 
{"Good evening":"4"}]

Jede Idee, warum das Auswahlmenü endet leer (beide aktivierten console.logs geben das richtige Ergebnis, also sollte es definitiv funktionieren?

Quelle

2016-05-06 softwareplay

Sie dienen die Website von dem gleichen Port wie der API-Endpunkt ('http: // localhost: 8090')? –

natürlich, der Ajax-Aufruf trow Fehler, so ist es richtig, soweit ich weiß. – softwareplay

Ich habe überprüft, um sicher zu sein;) – softwareplay

Versuchen Sie, Ihren Service und verwenden ein Versprechen Einstellung der Liste der Optionen zu erhalten.

Service:

.service("Addcontent", function($http, $q){ 
    this.name = "Nome"; 
    this.familyName = "Cognome"; 
    me = this; 
    me.tipi= null; 
    this.getTipi = function() { 
     var deferred = $q.defer(); 
     if(me.tipi) { 
      deferred.resolve({options: me.tipi, selectedOption: me.selectedOption}); 
     } else { 
      $http.get("http://localhost:8090/my-site/data.json").success(function(data) { 
       console.log(data); 
       me.tipi = data; 
       me.selectedOption = me.tipi[0]; 
       console.log(me.tipi); 
       deferred.resolve({options: me.tipi, selectedOption: me.selectedOption}); 
      }).error(function(){ 
       console.log("error"); 
      }); 
     } 
     return deferred.promise; 
    }; 
});

Und in Ihrem Controller, die Ergebnisse aus dem Dienst erhalten:

var ctrl = this; 
Addcontent.getTipi().then(function(data) { 
    ctrl.tipi = data.options; 
    ctrl.selectedOption = data.selectedOption; 
});

Ich denke, dass Ihre ngOptions sein soll (aber ich bin nicht ganz sicher - ich ll check):

ng-options="value as key for (key , value) in greeting.tipi"

Quelle

2016-05-06 15:17:57

Wenn ich diesen Pfad folge, protokolliert er nichts (die ngOption ist richtig, denke ich) ... – softwareplay

Haben Sie '$ q' in die Abhängigkeiten des Dienstes injiziert? –

Scheint so, als wären die Daten leer ... vielleicht empfangen sie keine Daten vom Server? – softwareplay

Ich kann nur davon ausgehen, dass die data-ng-options="c for c in greeting.tipi" die c, die Sie von Ihrem Array bekommen, ein Objekt ist statt eines Wertes, der angezeigt werden kann.

Überprüfen Sie this link für Details über ng-Optionen. Ich denke, dass dieses Beispiel zu Ihrem Fall passt <select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>.

Quelle

2016-05-06 15:04:06

müsste ich dann den json ändern? – softwareplay

Ja, das würde bedeuten, ein json-Objekt wie '{key:" Hello ", Wert:" 1 "}' zum Beispiel als Teil des Arrays zu verwenden, also würde das Array nur aus solchen Objekten bestehen. –

Versuchen Sie, Ihre Tipis nach dem Ajax-Aufruf In Ihrem Service

this.ajaxCall = function(){ 
    return $http.get("http://localhost:8090/my-site/data.json").success(function(data) { 
      return data; 
     }).error(function(){ 
      console.log("error"); 
     }); 
     }

Dann in Ihrem Controller

Addcontent.ajaxCall().then(function(tipi){ 
     this.tipi=tipi; 
     });

Quelle

2016-05-06 15:06:59

Es gibt etwas, das ich nicht über $ http-Service in eckigen bekommen

Antwort

Verwandte Themen