Question

我是Angular的新手，但设法进行Ajax调用并在列表视图中打印随机用户生成器API 中的用户。现在我想在点击用户时制作详细视图。在我的HTML中，我进行了一个函数调用：fetchInfoById（user.id.value）在我的脚本中功能：

$scope.fetchInfoById = function(info_id) {     
   $http.get("https://randomuser.me/api/?id.value="+info_id)
   //also tried:   $http.get("https://randomuser.me/api/?id/value="+info_id)
          .success(function(data) {
            $scope.oneUserResult = data.results; 
    }); 
}

它确实为我提供了一个详细信息视图的用户，但不是所选择的视图。我究竟做错了什么？

Answer 1

感谢您的好建议。我知道它是一个随机生成器，但是将请求的参数设置为：＆＃34; seed = ...＆＃34;，每个listview请求上显示相同的人：

$http.get('https://randomuser.me/api/?results=15&seed=abc&inc=gender,name,location,email,dob,phone,cell,id,picture,info,nat&nat=gb')
    .success(function(response){
        $scope.userResult = response.results; 
});

然后我为每个人获取了id，并作为参数传递给函数调用，以获取详细视图的请求。

我尝试使用console.log（）来确保传递了详细视图请求的正确值，然后甚至硬编码了请求的参数，即：

$scope.getInfoById = function(info_id) {    
    console.log("from HTML: "+info_id.value );   //  =  JK 00 46 67 
    $http.get("https://randomuser.me/api/?id="+'JK 00 46 67 H')    ...

API背后的jason数据的格式如下：id-property：

{
  "results": [
    {
     "id": {
        "name": "BSN",
        "value": "04242023"
     },...

我仍然没有想出如何通过id获得一个用户。即使使用硬编码ID，也始终获得不同的用户... 而不是发出第二个请求我的解决方案是通过＆＃34;点击的用户＆＃34;作为详细视图的参数。

Answer 2

将您的代码更改为：

$scope.fetchInfoById = function(info_id) {     
   $http.get("https://randomuser.me/api/?id="+info_id)
   //also tried:   $http.get("https://randomuser.me/api/?id/value="+info_id)
      .success(function(data) {
        $scope.oneUserResult = data.results; 
   }); 
}

另外，请确保将正确的值传递给此函数。

Answer 3

从API调用中获取用户列表＆＃34; https://randomuser.me/api/?results=5＆＃34;。

$scope.getAllUsers= function(resultCount) {     
       $http.get("https://randomuser.me/api/?results="+resultCount)
            .success(function(data) {
            $scope.users= data.results; 
   });

在屏幕上显示它们。

点击之前提取的用户列表中该特定记录的一个记录提取详细信息。

$scope.getUserById= function(userId) {
    return $scope.users.filter(function(user) {
      return user.id.value=== userId;
    })[0]; // apply necessary null / undefined checks wherever required. 
  }

Answer 4

使用ng-model的另一种方式：

{{1}}

随机用户生成器API - 通过ID Angular JS获取用户

4 个答案: