Angularjs 在<；中添加动态视图；李宁重复>；

我在一个项目中使用AngularJS 1.3和ui router（我对它很陌生），有一组设计元素我不清楚如何处理。我找到的所有ui路由器示例和教程都显示了经典的左侧边栏对象列表，当您单击列表中的某个项目时，右侧的共享ui视图将加载相关的详细内容。我理解这种方法，但是我为一个项目工作的设计师有一个设计，其中用户列表是垂直的全页面宽度，点击用户需要在视图下方展开，该视图包含一个图形和其他关于用户的元数据，这将需要一个API调用来填充内容

HTML的结构基本上是

<ul>
<li ng-repeat="name in names"> 
   <span>{{name}}</span>
   <div>Graph/content goes here on click of name span above</div>
</li>
</ul>

{{name}}
单击上面的名称span，此处显示图形/内容

另一个要求是，单击任何其他名称都会使以前的内容消失。。我不想在这里隐藏/显示-我想创建一个以某种方式为目标的ui视图，但这可能不可能

在大量搜索和阅读教程之后，我仍然不知道如何使用Angular和/或ui router来实现这一点

---

任何帮助都将不胜感激

如果需要显示/隐藏

上的

ng指令，可以使用
ng，并在
{{name}}
上添加一个更改可见性状态的点击指令。如果使用
ngif
，当ng If的计算结果为false时，元素将从DOM中删除

以下是一个例子：

模板

<ul>
    <li ng-repeat="name in names">
        <span ng-click="togglePanel($index)">{{name}}</span>
        <div id='panel' ng-if='show[$index]'>Graph Here on click of name: {{graphData}}</div>
    </li>
</ul>

您可以在
上使用
ng show
指令。您需要使用一个元素来显示/隐藏名称，并在单击时使用
指令来更改可见性状态。然后，我的问题是，如果用户单击列表中的每个名称，我是否正在使用重量级图表和加载到内存中所需的JSON构建DOM？我担心的是，如果我不替换DOM视图，浏览器最终会停止运行。我尝试使用一个名为views的单视图ala ui路由器如果可能使用ng if而不是ng show如果您不想在“隐藏”时加载图形是的，我理解，但当我单击另一个名称时，我基本上只是隐藏已加载的图形，而不是替换它。。理想情况下，当单击名称时，有一种方法可以替换内容，而不是使用所有这些大型对象构建DOM。如果使用ng，则当ng if计算结果为false时，元素将从DOM中删除。我写了一个快速的JSFIDLE如果你能帮忙的话就在这里谢谢klode。这正是我需要了解的。
var openId = null;
function closePanel(id) {
    $scope.show[id] = false;
    openId = null;
    $scope.graphData = null;
}
$scope.graphData;
$scope.show = {};
$scope.names = ['Name 1', 'Name 2', 'Name 3'];
$scope.togglePanel = function (id) {
    if (openId === id) {
        closePanel(openId);
        return;
    }
    if (openId !== null) {
        closePanel(openId);
    }
    $scope.show[id] = true;
    openId = id;
    $scope.graphData = loadData(id);
    //alert('load graph #' + (id+1));
}

function loadData(id) {
    return 'graph #' + (id + 1);
}