将Angular $ http.get调用对象分配给变量(Assigning Angular $http.get call object to variable)
好吧，首先，我是非常新的Angular。 我试图使用$ http.get调用从CouchDB获取所有文档（一个JSON对象）。 JSON对象基本上是一个人员列表，带有id，他们的名字和一些引号：
{
"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"
}
}
]
}
我想根据以下HTML显示每个人的姓名：
<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>
这是我正在使用的控制器和服务：
.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);
});
}
};
}])
我检查了我的调试器并且GET调用工作正常，但问题是这些名称不会显示在浏览器的页面上。 我假设已返回的数据没有正确分配给$ scope.persons var。
Okay so, first of all, I'm pretty new Angular. I'm trying to get all of my documents (a JSON object) from CouchDB using a $http.get call. The JSON object is basically a list of people, with an id, their names and some quotes:
{
"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"
}
}
]
}
I'd like to show the name of each person according to the following HTML:
<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>
And here is the controller and service I'm using:
.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);
});
}
};
}])
I checked my debugger and the GET call works fine, but the problem is that the names won't show up on the page in my browser. I'm assuming the data that's been returned doesn't get assigned to the $scope.persons var properly.
最满意答案
尝试$scope.persons = response.rows; 作为具有人员列表的rows数组。
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
var response = {
"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"
}
}
]
};
$scope.persons = response.rows;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<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>
</body>
</html>
Try $scope.persons = response.rows; as rows array having a list of persons.
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
var response = {
"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"
}
}
]
};
$scope.persons = response.rows;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<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>
</body>
</html>
更多推荐
发布评论