Ng-hide ng-show或路由以显示编辑/添加表单

时间:2015-08-10 13:41:46

标签: angularjs angularjs-routing ng-show ng-hide

想象一下,应用程序有一个List页面,例如显示用户列表的表。表格的每一行都有一个名为“编辑”的按钮,当点击它时,右侧面板会出现在浏览器的右侧,其中包含用于编辑该用户内容的表单。保存表格或关闭表格时,右侧面板消失。 我看到有些人使用ng-hide / ng-show来显示/隐藏编辑表单,而其他人则使用路由。 我的问题是什么是最好的方法和原因。

3 个答案:

答案 0 :(得分:1)

我认为这取决于你想要什么。当您选择使用路由时,您可以为该页面添加书签,因为您有一个完整的URL。但是,如果您选择使用nghide/ngshow,则不能。

您可以考虑使用ngshow/ng-hide,而不是使用ng-if。区别在于ng-if从Dom树中删除了HTML。因此,假设您在列表中有100个项目并使用ng-hide/ng-show所有数据都加载到Dom树中。但是当使用ng-if时,必要的html仅在必要时附加到dom。

答案 1 :(得分:0)

当您在html中包含模板但只想根据某些条件显示/隐藏时,会使用

ng-show / ng-hide。

路由用于完全转到单独的html。

由于添加/编辑是一个单独的功能,然后显示列表,理想情况下,这些表单应显示在单独的页面中。但这取决于UI的设计方式。

您可以使用路由进行ADD /编辑表格或ng-show / ng-hide。

希望这有帮助。

答案 2 :(得分:0)

根据您的描述,听起来您想要使用show / hide。当您编辑一个条目时,您希望列表的其余部分仍然存在,当您保存该条目时,您希望返回列表视图。您可以为编辑表单执行ng-show="edit_object != null"之类的操作,当您单击编辑按钮时,可以设置$scope.edit_object=row并使用要编辑的对象的内容填充表单的输入。保存或关闭编辑表单时,可以设置$scope.edit_object=null