Question

我的代码不是很简单，因为我必须在控制器之间共享一些属性，但问题并不存在。我正在尝试添加一些ajax调用（像所有其他东西一样运动）并且我在html布局中的select选项中得到一个空数组，它应该获取json的内容并填充选择menù作为结果

这是我的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
  };
});

这是我的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>

要使用的json是：

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

为什么选择菜单最终为空的任何想法（激活的console.logs都给出了正确的结果，因此它应该可以正常工作？

Answer 1

尝试更改您的服务并使用承诺获取选项列表。

服务：

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

在您的控制器中，从服务中获取结果：

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

我认为你的ngOptions应该是（但我不完全确定 - 我会检查）：

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

Answer 2

我只能假设您从数组中获取的data-ng-options="c for c in greeting.tipi"是一个对象而不是可以显示的值。

检查this link以获取有关ng-options的详细信息。我认为这个例子可能符合您的情况<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>。

Answer 3

尝试在ajax调用后设置您的tipi 在您的服务中

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

然后在您的控制器中

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

有些东西我没有得到关于$ http服务的角度

3 个答案: