Question

我正在使用AngularJS 1.3和ui-router（我很新手）进行项目，并且有一套设计元素，我不清楚如何处理。我能够找到的所有ui-router示例和教程都显示了经典的左侧边栏对象列表，当您单击列表中的项目时，右侧的共享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>

另一个要求是点击任何其他名称会使之前的内容消失。我不是想隐藏/显示在这里 - 我想创建一个单向的ui视图，但不管怎样不可能吗？

经过多次搜索和阅读教程后，我仍然不知道如何使用Angular和/或ui-router实现这一目标。

任何帮助将不胜感激。

Answer 1

您可以使用ng-if上需要显示/隐藏的<div>指令，并<span>{{name}}</span>添加更改可见性状态的点击指令。如果使用ng-if，则当ng-if计算结果为false时，该元素将从DOM中删除。

以下是 [demo]示例：

模板

<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>

和控制器：

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);
}

在<li ng-repeat =“”> </li>中添加动态视图

1 个答案: