Question

好的，首先，我是一个非常新的Angular。我尝试使用$ http.get调用从CouchDB获取所有文档（JSON对象）。 JSON对象基本上是一个人员列表，带有id，他们的名字和一些引号：

＆＃13;

{

    "total_rows": 2,
    "offset": 0,
    "rows": [
        {
            "id": "5",
            "key": "5",
            "value": {
                "rev": "1-b26014051b18bce04ae2190d9cb92d81"
            },
            "doc": {
                "_id": "5",
                "_rev": "1-b26014051b18bce04ae2190d9cb92d81",
                "dataid": "5",
                "dataname": "Robin",
                "dataquote": "Blah"
            }
        },
        {
            "id": "9",
            "key": "9",
            "value": {
                "rev": "1-8ecbf37d0ccc129530e57747b46faa8e"
            },
            "doc": {
                "_id": "9",
                "_rev": "1-8ecbf37d0ccc129530e57747b46faa8e",
                "dataid": "9",
                "dataname": "Bert",
                "dataquote": "Hallo"
            }
        }
    ]

}

＆＃13;

我想根据以下HTML显示每个人的姓名：

＆＃13;

<div>
    <p class="lead">Persons</p>
    <ul>
        <li ng-repeat="p in persons"><a ng-href="#/quotes/{{ p.doc.dataid }}">{{ p.doc.dataname }}</a></li>
    </ul>
</div>

＆＃13;

以下是我使用的控制器和服务：

＆＃13;

.controller('personsCtrl', ['$scope', 'personSrv', function personsCtrl($scope, personSrv) {
  $scope.persons = personSrv.getAllpersons();

.factory('personSrv', ['$http', '$q', function ($http, $q) {

  return{
    getAllpersons: function(){

    return $http.get('http://localhost:5984/quotes/_all_docs?include_docs=true')
      .then(function(response){
        if (typeof response.data === 'object'){
          return response.data.rows;
        } else{
          return $q.reject(response.data);
        }

      }, function(response){
        return $q.reject(response.data);
      });
    }
  };
}])

＆＃13;

我检查了我的调试器并且GET调用工作正常，但问题是名称不会显示在浏览器的页面上。我假设已经返回的数据没有被正确地分配给$ scope.persons var。

Answer 1

使用：

personSrv.getAllpersons().then(function(data){

  $scope.persons = data;

});

Answer 2

getAllpersons函数返回一个使用response.data.rows解析的派生承诺。需要使用promise的.then方法提取数据：

//$scope.persons = personSrv.getAllpersons();

var rowsPromise = personSrv.getAllpersons();

rowsPromise.then(function(rows){
    $scope.persons = rows;
});

Answer 3

传入成功处理程序，在进行http调用后运行，而不是返回一个promise。

＆＃13;

.controller('personsCtrl', ['$scope', 'personSrv', function personsCtrl($scope, personSrv) {
  personSrv.getAllpersons(function(rows) {
    $scope.persons = rows;
  });

.factory('personSrv', ['$http', '$q', function ($http, $q) {

  return{
    getAllpersons: function(success, fail){

    $http.get('http://localhost:5984/quotes/_all_docs?include_docs=true')
      .then(function(response){
        if (typeof response.data === 'object'){
          if (success) {
            success(response.data.rows);
          }
        } else{
          if (fail) {
            fail(response.data);
          }
        }

      }, function(response){
        if (fail) {
          fail(response.data);
        }
      });
    }
  };
}])

＆＃13;

Answer 4

尝试handlePinch:作为iCarousel数组，其中包含人员列表。

$scope.persons = response.rows;

rows

将Angular $ http.get调用对象分配给变量

4 个答案: