我现在正在对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"
},
{
时,我希望我的列表看起来像这样:
希望有助于清理它。
答案 0 :(得分:1)
这里有很多事情要发生:
ul
的记录
postId
的过滤应该是服务器端的,因此您只能获得所需的数据;当然,没有服务器,只是一个简单的文件GET
,你可以做的不多,但是我会在$http.get()
而不是html中添加它,因为那是你得到的地方(实际上,我会把它提取到服务中,但这完全是另一个问题)我更新了plunkr以便让你选择正常工作。
http://plnkr.co/edit/4VEFBCIybk4mEO0mxGa2?p=preview
实际上,您甚至不需要filter()
回调,因为您在ng-repeat
的{{1}}中正确使用了它,因此我将其删除了。请使用更新的plunkr