Question

我有像

这样的小文字部分

<div>
    <h4>Why Register?</h4>
    <p>As candidate...</p>
</div>

反对

<div>
    <h4>Why Register?</h4>
    <p>As company...</p>
</div>

基于我控制器中的变量，我插入了正确的部分：

<div ng-switch on="role">
  <div ng-switch-when="candidate">
    <div ng-include="'candidate.html'"></div>
  </div>
  <div ng-switch-when="company">
    <div ng-include="'company.html'"></div>
  </div>
  <div ng-switch-default>
    <div ng-include="'candidate.html'"></div>
  </div>
</div>

这可以胜任，但看起来很糟糕。有什么方法可以做得更好吗？

Answer 1

你总是可以在javascript或外部json文件中保存你的字符串变量，并使用与这样的模型绑定的标记：

<div ng-controller="something">
    <h4>Why Register?</h4>
    <p>{{who}}</p>
</div>

然后在你的“某事”控制器里面提供代码：

if(role == "company")
 $scope.who = "As company...";
else
 $Scope.who = "As candidate...";

如果你在代码中有很多地方使用这样的功能，你可以考虑在外部json中保存变量，然后在javascript / controller中读取它们。

Answer 2

您可以使用：

<div ng-include="(role || 'candidate') + '.html'"></div>

Answer 3

如果部件不是那么大，你可以将它们全部放在那里并使用ng-show来过滤实际显示的部分。这占用了最少的标记。

<h4>Why register?</h4>
<p ng-show="isCompany">Company targeted content...</p>
<p ng-show="isCandidate">Candidate targeted content...</p>

AngularJS：基于状态/变量显示静态文本的最佳实践

3 个答案: