angularjs 将 JS 对象数组传递给 JSON 时出错



我按照这个SO链接并尝试使用它。如果我传递与答案中相同的数组,我会得到结果。现在我尝试用我的输入替换数组,如下所示,但我得到 [对象对象]。我试图将JS对象转换为JSON,但出现错误。指令不允许这样做。如何获得所需的结果。

在控制器中

App.controller('PartsController',['$scope', 'Parts', function($scope,Parts) {
            $scope.parts = {};
            $scope.availablePartsTemp = [];
            $scope.availableParts = [];
            $scope.fetchAllParts = function() {
                $scope.availablePartsTemp = Parts.resource.query(function(
                        response) {
                    angular.forEach(response, function(item) {
                        if (item) {
                            $scope.availableParts .push(item);
                            }
                    });
                });
            };
            $scope.selectedList = [];
        } ]);

在 html 中

    <ng-list-select selected-list="selectedList" 
                           key="part" available-list="availableParts" ></ng-list-select>
<br/>
      <b>availableList::</b>{{availableParts | json}}
      <br />
      <b>selectedList::</b>{{selectedList| json}} 

不确切了解您面临的问题,我创建了一个类似于您的模型,它似乎工作正常。

请看一看

工作普伦克

脚本

angular.module('app', ['ngListSelect'])
.controller('MainCtrl', function($scope, $q) {
  //////////// Mocking Parts //////////////
  Parts = function(){};
  Parts.resource = function(){};
  Parts.resource.query = function(){
    deferred = $q.defer();
    var responseJson = [{id:1, part:'Hose'},{id:2, part:'Clamp'}, {id:3, part:'Pipe'}, {id:4, part:'Screw'}, {id:5, part:'Hammer'}]
    deferred.resolve(responseJson);
    return deferred.promise;
  }; 
  //////////// Mocking Finished ///////////

  $scope.parts = {};
  $scope.availablePartsTemp = [];
  $scope.availableParts = [];
  $scope.fetchAllParts = function() 
  {
    $scope.availablePartsTemp = [];
    Parts.resource.query().then(function(response) {
      angular.forEach(response, function(item) {
        if(item) 
        {
          $scope.availableParts.push(item);
        }
      });
    },
    function(err){
      console.log(err);
    }); 
  };
  $scope.selectedList = [];
  $scope.fetchAllParts();
});

.html

  <body ng-app="app"> 
    <div ng-controller="MainCtrl">
      <br/>     
      <ng-list-select selected-list="selectedList" key="part" available-list="availableParts"></ng-list-select>
      <br/>
      <b>availableList::</b>{{availableParts | json}}
      <br />
      <b>selectedList::</b>{{selectedList| json}} 
     </div> 
  </body> 

最新更新