根据来自另一个$ http.get()的选择做$ http.get()

时间:2015-04-22 04:13:03

标签: javascript json angularjs

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

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

编辑澄清:

<select>中的选项应该是here的全部id。有100个唯一的id

<li>的{​​{1}}应该是与上面的<ul>具有相同email的相应postId - 找到here

因此,如果我从下拉列表中选择<select>,我希望这些电子邮件构成列表:

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" }, { 时,我希望我的列表看起来像这样:

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

希望有助于清理它。

1 个答案:

答案 0 :(得分:1)

这里有很多事情要发生:

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

我更新了plunkr以便让你选择正常工作。

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

实际上,您甚至不需要filter()回调,因为您在ng-repeat的{​​{1}}中正确使用了它,因此我将其删除了。请使用更新的plunkr