javascript - 根据另一个 $http.get( ) 的选择执行 $http.get( )

Question

我现在正在对 plunker 进行概念验证。我正在尝试使用从 $http.get( ) 中提取的数据填充下拉列表根据用户的选择，我想制作另一个 $http.get( )调用另一个 rest api 并获取相关数据并在 ng-repeat 中使用它列表。目前我有第一部分工作，但我不知道如何调用第二个电话。我正在使用 this第一组数据的假 rest api，并使用 id 填充下拉列表的，其中有 100 个。其次，我想让用户从下拉列表中选择 1-100，并显示来自 this 的匹配电子邮件集。基于他们的假休息 api postId有 500 个。

我希望这足够有意义。 Here是我有 1/2 工作方式的 plunker。

编辑澄清:

<select> 中的选项应该都是id来自 here .有 100 个独特的 id的。

<li>的 <ul>应该是对应的email具有相同的 postId作为 <select>以上 - 找到 here .

所以如果我选择 1从下拉列表中，我希望来自这些的电子邮件构成列表:

{
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
  },
  {
    "postId": 1,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
  },
  {
    "postId": 1,
    "id": 3,
    "name": "odio adipisci rerum aut animi",
    "email": "Nikita@garfield.biz",
    "body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
  },
  {
    "postId": 1,
    "id": 4,
    "name": "alias odio sit",
    "email": "Lew@alysha.tv",
    "body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
  },
  {
    "postId": 1,
    "id": 5,
    "name": "vero eaque aliquid doloribus et culpa",
    "email": "Hayden@althea.biz",
    "body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
  },
  {

所以我希望我的列表在 1 时看起来像这样被选中:

• Eliseo@gardner.biz
• Jayne_Kuhic@sydney.com
• Nikita@garfield.biz
• Lew@alysha.tv
• 海登@althea.biz

希望这有助于清除它。

Answer 1

这里发生了很多事情:

• 您想将用于过滤的更改功能与选择功能分开
• 您想在回调中利用 ng-model 进行选择
• 你想在选择后加载ul的记录
• 理想情况下，postId 的过滤应该是服务器端的，这样您就只会得到您需要的数据；当然，没有服务器，只有一个简单的文件 GET，对此你无能为力，但我会将其添加到 $http.get() 而不是html，因为那是你获取的地方(实际上，我会将它提取到服务中，但这完全是另一个问题)

我为您更新了 plunkr 以使选择正常工作。

http://plnkr.co/edit/4VEFBCIybk4mEO0mxGa2?p=preview

实际上，您甚至不需要 filter() 回调，因为您在 ul 的 ng-repeat 中正确使用了它>，所以我把它删掉了。改用更新的 plunkr