【问题标题】:Ng-hide ng-show or routing to show edit/add formng-hide ng-show 或路由显示编辑/添加表单
【发布时间】:2015-08-10 13:41:46
【问题描述】:

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

【问题讨论】:

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


    【解决方案1】:

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

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

    【讨论】:

    • 我只有一个带有 ng-model 的表单。当单击一行的编辑按钮时,我绑定了一个 selectedModel 变量,该变量传递了该行的项目,该变量用 ng-model 填充表单的字段。但是,是的,如果它也是一个选项的话。
    • 在这种情况下,我会选择ng-if 指令。你已经为它准备好了一切,并且为了减小 DOM 的大小,我会选择 ng-if
    • 那么,如果编辑在另一个页面(假设我想隐藏列表只显示表单)你建议使用路由吗?
    • 是的,当编辑页面是一个单独的页面时,我会为它创建一个新的路由。
    【解决方案2】:

    ng-show / ng-hide 用于当您的 html 中包含模板但只想根据某些条件显示/隐藏时使用。

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

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

    您可以使用路由添加/编辑表单或 ng-show/ng-hide。

    希望这会有所帮助。

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        猜你喜欢
        • 2015-01-30
        • 2014-12-08
        • 2014-03-27
        • 1970-01-01
        • 2014-09-04
        • 2015-02-12
        • 1970-01-01
        • 1970-01-01
        • 2014-03-08
        相关资源
        最近更新 更多