使用模型以角度创建主细节答案

【问题标题】：Creating master detail in angular using the model使用模型以角度创建主细节
【发布时间】：2012-11-24 10:25:54
【问题描述】：

给定下面的一个对象 -

function PersonCtrl(){ 
  $scope.persons = [{name: "Mike", age:21, 
                   occupation:{qualification: "engineer", company:"Intel"}}];  
}

以及下面的 DOM -

<ul>
   <li ng-repeat="person in persons">
      Name : {{person.name}}
      <div ng-model="person.occupation">
        Qualification : {{person.occupation.qualification}}
      </div>
    </li>
</ul>

我有一个列表中必须显示其姓名的人员列表。现在我将首先加载没有任何细节的数据，在这种情况下是人的资格。

当有人点击此人的姓名时，我将检索此人的详细信息。我只想更改模型，即将资格详细信息添加到该人的模型中，然后添加角度以创建 DOM。

控制它的一种方法是使用 ng-show，并设置它的表达式，以便它只显示限定 div，如果以及当限定对象具有值时。然而，这也将导致为每个人创建详细信息 div，从而对性能不利。

当表达式的计算结果为 true 或 false 时，有没有办法通过 angular 创建/销毁 dom？

【问题讨论】：

Conditionally adding elements in ng-repeat block的可能重复

标签： angularjs

【解决方案1】：

如果我们想有条件地物理删除/添加 DOM 的一部分，ng-switch 指令系列（ng-switch、ng-switch-when、ng-switch-default）将派上用场。

【讨论】：

【解决方案2】：

如果详细数据很小，并且获取它没有巨大的成本，或者关于是否允许当前用户查看它的规则，那么我会说渲染它并最初隐藏它。保持折叠状态只会让用户无需考虑该细节，除非他们希望将其用于某些记录。

如果它很大，或者检索/计算成本很高，或者有规则禁止某些用户查看某些详细信息，那就不同了。在这种情况下，我只会渲染“按钮”来访问它，并在请求时通过 ajax 加载详细信息。

【讨论】：