php - Angularjs ui-router 嵌套状态仅显示特定结果

Question

我有一个带有嵌套状态的 angularjs 应用程序。但我不知道如何在嵌套状态下动态显示/隐藏 div...

它的工作原理如下：

在 index.html 上有三个链接：

<a ui-sref="territory({territory: 'amer'})">AMER</a>&nbsp;<a ui-sref="territory({territory: 'emea'})">EMEA</a>&nbsp;<a ui-sref="territory({territory: 'apac'})">APAC</a>

<ui-view></ui-view>

根据点击的内容，将显示国家列表。这些国家也是由视图“views/countries.html”代码生成的链接：

<h1>This is countries</h1>
<br>
Teritory: {{region}}
<div ng-repeat='country in countries'>
    <a ui-sref=".support({country: '{{country}}'})">{{country}}</a ui-sref>
        <ui-view></ui-view>
    </div>
</div>

这里的 UI-VIEW 是我想要在单击一个国家/地区时使用的，它应该显示属于该国家/地区的人……但仅在单击该国家/地区时。

例子：

Sweden

 - person A
 - person B

Germany
Italy

并且当点击意大利时，瑞典下的人将再次被隐藏，意大利下的人将被显示。

然后，属于 .support 的控制器应使用工厂服务来检索人员。但控制者（我猜）还应负责仅在正确的国家/地区显示人员数据。但这就是我卡住的地方。我很确定我必须将第二个嵌套的 ui-view 放在 div 中并动态切换可见性......

伪代码：

When country-link is clicked
controller reads which country is clicked (by using $stateparams)
get the results from service (parameter country)
return the people
Make the div under the correct country visible
hide the rest

我怎样才能以一种聪明的方式做到这一点，我需要为 div 分配一个 ID 或名称，然后在结果出现时使其可见或隐藏...

当然，一种解决方案是将视图置于国家列表之下。那么这不会是一个问题。但我真的希望他们在他们所属的国家之下......

附言。单击其中一个国家/地区时现在发生的情况是：

Teritory: emea
Sweden emeaBelgiumsupporters go here
Poland emeaBelgiumsupporters go here
Italy emeaBelgiumsupporters go here
Malta emeaBelgiumsupporters go here
Netherlands emeaBelgiumsupporters go here

谢谢你！

标签： phpjqueryangularjsangular-ui-router