将 $http return 数据更新到 html 视图

Question

我正在获取我的数据表 angular 服务

.service('SelectedMemberDetail', function ($http) {
        return {
      get : function(id) {
          return $http.get('/api/members/'+ id);
      },
      create : function(id) {
          return $http.post('/api/members/'+ id);
      },
      delete : function(id) {
          return $http.delete('/api/members/'+ id);
      }
    }
})

这是调用该服务的控制器函数。

$scope.show = function (user_id) {
    $scope.selectedMember = SelectedMemberDetail.get(user_id);
}

我正在尝试像这样在 html 中查看

<h2>
  <span class="glyphicon glyphicon-user mleft_10 icon_big"></span>
    {{ selectedMember.firstName[0] }}
</h2>
<div>
  <p class="clear_margin"><b>Address: </b>
     {{ selectedMember.address[0] }}
  </p>
  <p><b>Contact: </b>{{ selectedMember.contact[0] }}</p>
 </div>

我检查了，服务函数正在返回 json 数据，在这里，

_id: "552386cb880611101168ab4b"
address: ["pata nai", "text"]
contact: ["23456", "tel"]
email: ["anoop@email", "email"]
firstName: ["Anoop", "text"]
lastName: ["singh", "text"]

我无法在浏览器上看到更新后的数据。我的代码有什么问题？

Answer 1

当您使用 $http.get 时，它 returns 是一个承诺，而不是数据本身。您需要这样做：

$scope.show = function (user_id) {
    SelectedMemberDetail.get(user_id)
      .success(function (result) {
        $scope.selectedMember = result;

    });
}

在此处查看更多信息：

https://docs.angularjs.org/api/ng/service/$http

Answer 2

通过 $http 使用 promise return 然后分配 value.It 没有显示任何内容，因为您直接将 promise 分配给作业，它不会在视图中显示任何内容。

SelectedMemberDetail.get(user_id).then(function(response){
$scope.selectedMember = response.data
});

SelectedMemberDetail.get(user_id).success(function(response){
$scope.selectedMember = response.data
});

有两种方法可以从 $http 中获取承诺 return，一种是 then，另一种是 success。看看 Doc.

Answer 3

我喜欢这种模式：

.service('SelectedMemberDetail', function ($http) {
      return {
         get : function(id) {
             var member = {};
             member.$promise = $http.get('/api/members/'+ id)
                 .success(function(data) {
                     angular.copy(data, member);
                 });
             return member;
         }        
      }
})

get 方法returns 立即引用成员。当 $http 调用成功完成时，它使用 angular.copy 分配成员的属性，同时保留引用。

这样你仍然可以这样做（主要用例）：

$scope.show = function (user_id) {
    $scope.selectedMember = SelectedMemberDetail.get(user_id);
}

成员还有一个$promise属性，所以如果需要处理成功或错误（边缘用例）：

$scope.selectedMember = SelectedMemberDetail.get(user_id);
$scope.selectedMember.$promise.success(function(data) {
     // do something else with member
});

将 $http return 数据更新到 html 视图

Update $http return data to html view

mongodb

node.js

express

angularjs