Question

我对angular js非常陌生，并且一直在使用api。下面的代码显示用户名和单击时的用户名。我想做的是，我希望用户在单击按钮时获得todos标题。 https://jsonplaceholder.typicode.com/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];

};

}）;

Answer 1

我这样写你的代码：

var app = angular.module('myApp', []);
var root = 'http://jsonplaceholder.typicode.com/users';
var todos= 'https://jsonplaceholder.typicode.com/todos'
app.controller('customersCtrl', function($scope, $http) {

$http.get(root).then(function (response) {
  $scope.myData = response.data;
});
   $scope.getResult = function(item) {
      $scope.titleList = [];
      $http.get(todos).then(function (response) {
      $scope.todosList = response.data; }).then(()=> {
      $scope.todosList.map(it=> {
      if (it.userId === item.id){
         $scope.titleList.push({title: it.title , id: it.userId});
      }   
   });
});
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="app.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(x)">Click</button>
 </li>
 </ul>

<h2>Results</h2>
 
    <ul>
   <li ng-repeat="item in titleList">
  {{ item.title }}
   </li>
 </ul>
 </div>
   </body>
</html>

使用AngularJS的JsonPlaceHolder多个API调用

1 个答案: