如何在不更改标记的情况下隐藏AngularJS中的内容

时间:2014-12-15 10:29:03

标签: javascript angularjs

我有一个包含一些AngularJS页面的PHP应用程序。

我想在不同的Angular控制器中重复使用其中一个模板,并使用Angular根据下拉值隐藏一些内容。

我不想重复自己并使用ng-hide制作一个几乎完全相同的模板,因为我最终会制作内容的多个副本,并且在更改时会冒失败的风险

使用模板的其他地方不会也不会根据下拉列表定义隐藏和显示的方法。如何在不使用ng-hide等的情况下隐藏和显示Angular中的内容?我是否需要制作虚拟控制器方法以避免错误?当然有更好的方法吗?

1 个答案:

答案 0 :(得分:1)

您可以将ng-if与您定义的bool变量一起使用,并将其设置为false,以隐藏该控件:

<div ng-if="showTheDiv !== false"></div>

只要$scope.showTheDiv未定义或设置为true,就会显示内容。因此,如果您需要在某处隐藏它,请务必设置此值。


更好的解决方案是将重复部分封装在指令中,然后您可以重复使用,并添加一些具有合理默认值的参数。