Javascript 使用AngularJS的JsonPlaceHolder多api调用_Javascript_Angularjs_Api

Javascript 使用AngularJS的JsonPlaceHolder多api调用

javascript angularjs api

Javascript 使用AngularJS的JsonPlaceHolder多api调用,javascript,angularjs,api,Javascript,Angularjs,Api,我对angular js非常陌生，我一直在使用api。下面的代码显示了用户的名称以及单击时的用户名称。我想做的是，我希望用户在单击按钮时获得todos标题。我该怎么做？我知道有点困惑，但我在等你们 jsonplaceholder.html <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> <

我对angular js非常陌生，我一直在使用api。下面的代码显示了用户的名称以及单击时的用户名称。我想做的是，我希望用户在单击按钮时获得todos标题。我该怎么做？我知道有点困惑，但我在等你们

jsonplaceholder.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
</script>
<script src="script.js"></script>

<head>
<title>JsonPlaceHolder</title>
</head>

<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
 <li ng-repeat="x in myData">
    {{ x.name }}

<button ng-click="getResult($index)">Click</button>
 </li>
 </ul>

<h2>Results</h2>
  <p><code>Title : </code> {{indexResult.name}}</p> 
 </div>
 </body>
   </html>

script.js

var app = angular.module('myApp', []);
var root = 'http://jsonplaceholder.typicode.com/users';
app.controller('customersCtrl', function($scope, $http) {
$http.get(root).then(function (response) {
  $scope.myData = response.data;
});
 $scope.getResult = function($index) {
 $scope.indexResult = $scope.myData[$index];

};

}))

我这样编写您的代码：

var-app=angular.module（'myApp'，[]）；
变量根http://jsonplaceholder.typicode.com/users';
var todos=https://jsonplaceholder.typicode.com/todos'
app.controller（'customersCtrl'，函数（$scope，$http）{
$http.get（root）.then（函数（响应）{
$scope.myData=response.data；
});
$scope.getResult=函数（项）{
$scope.titleList=[]；
$http.get（todos）.then（函数（响应）{
$scope.todoList=response.data；}）。然后（（）=>{
$scope.todoList.map（it=>{
if（it.userId==item.id）{
$scope.titleList.push（{title:it.title，id:it.userId}）；
}   
});
});
};
});

JsonPlaceHolder


{{x.name}
点击


结果


{{item.title}


谢谢您的代码。但代码是不完整的。因为它只带来一个标题。但是，用户有20个标题。为什么它不显示其他标题？我为您编辑它。根据用户ID显示所有标题