为什么Angularjs服务返回一个字符数组而不是一个对象数组?

时间:2015-03-28 15:05:52

标签: javascript angularjs angularjs-scope angularjs-ng-repeat

我正在使用服务(.factory)来保存由多个控制器更新的对象/项目数组,然后每个控制器将数据拉回。每次我添加一个新的数据数组,我都会把它推到数组上。但是,当我尝试在我的控制器中加载一个数组以便我可以将它显示给我的视图时,它返回一个字符数组,这使得无法使用ng-repeat来迭代这些值。

// controllers.js
angular.module('myapp.controllers', [])

.controller('MainCtrl', function($scope, MainService) {
  $scope.mainItems = MainService.all(); // Why does this return a char array?

  // get the count
  $scope.getCount = function(item){
      return TempOrder.getCount(item);
  }

  // add an item
  $scope.addItem = function(item){
      TempOrder.addItem(item);
      return TempOrder.getCount(item);
  }

})
.controller('SecondaryCtrl', function($scope, MainService) {
   $scope.items = MainService.all(); // Why does this return a char array?

  // get the count
  $scope.getCount = function(item){
      return TempOrder.getCount(item);
  }

  // add an item
  $scope.addItem = function(item){
      TempOrder.addItem(item);
      return TempOrder.getCount(item);
  }
});

这是我的服务

// services.js
angular.module('myapp.services', [])

.factory('MainService', function() {

orderItems = [];

return {
   all: function() {
       return orderItems;  // Why does return a char array???
   },
   getCount: function(item){
      var count = 0;
      for (i = 0;i<orderItems.length;i++) {
        if (orderItems[i] === item ){
          count++;
        }
      }
     return count;
   },
   addItem: function(item) {
      orderItems.push(item);
   }
  }
});

2 个答案:

答案 0 :(得分:0)

我已更新了您的上述代码,但由于某些原因,在此处添加代码段时会获得module not found

请参阅this fiddle了解您的解决方案,我不确定出了什么问题,但也许它可能是您只能传递item.name或任何密钥的html,或者您可能尚未初始化$scope.item = {}中的controller,这就是为什么它仍未定义且角度无法绑定到它。请记住 Angular不会绑定到控制器引导程序未定义的值

答案 1 :(得分:0)

感谢I_Debug_Everything求助。我意识到在我看来我没有正确传递项目对象。当以错误的方式传递时,它不会作为对象传递,从而无法引用项目的属性。正确的方式将项目作为对象传递,因此我可以访问函数中的item.name之类的东西。

错误的方式

<div ng-controller="MainCtrl">
    <div ng-repeat="item in items track by $index">
        <button ng-click="addItem('{{item}}')">{{Item.name}}</button>
    </div>
</div>

正确的方式

<div ng-controller="MainCtrl">
    <div ng-repeat="item in items track by $index">
        <button ng-click="addItem(item)">{{Item.name}}</button>
    </div>
</div>