Question

我使用Angularjs UI Layout来支持可调整大小的分割器。我需要为主html文件实现List / Grid View。这样根据用户选择导航栏中的按钮列表或网格，我必须相应地布局html文件。

有没有办法渲染不同的html文件，如List.html用于列表按钮选择，Grid.html用于网格按钮选择？

在这种情况下，List.html和Grid.html显示的模型绑定和UI相同，只是布局发生了变化。

附加到plunker的链接：http://plnkr.co/edit/XYeRbERAWcgkmB5ecNob?p=preview

任何指针??

List.html

<div id="products" class="row list-group">
    <div class="row">
          <div class="item col-sm-5 col-md-6">
        <div class="editor-container">
            <textarea ui-codemirror="{ onLoad : editorLoaded }" ng-model="sfsql"
                ng-trim="false"></textarea>

        </div>
    </div> 
        <div class="item col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
        <div ng-controller="TableCtrl">
            <div id="tableId" ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav ui-grid-selection ui-grid-infinite-scroll
                 class="grid">
            </div>
        </div>
        </div>
      </div>
      <div class="row">
        <div class="item col-sm-6 col-md-5 col-lg-6">
        <div class="viewer-container">
            <div class="error" ng-bind="results.error"></div>
            <textarea ui-codemirror="viewerOptions"
                ng-model="results.translation"></textarea>
        </div>
        </div>
        <div class="item col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
        <div class="viewer-container">
            <div class="error" ng-bind="results.error"></div>
            <textarea ui-codemirror="planViewerOptions" ng-model="results.plan"></textarea>
        </div>
    </div>
    </div>
</div>

Grid.html

<div class="wrap">
    <div ng-controller="uiLayoutCtrl" ui-layout on-resize="ResizeFn()">
        <div ui-layout="{flow : 'column'}" on-resize="ResizeFn()">
            <div class="editor-container">

                <div><textarea ui-codemirror="{ onLoad : editorLoaded }" ng-model="text"
                    ng-trim="false"></textarea></div>
            </div>
            <div class="viewer-container">
                <div ng-controller="TableCtrl">
                    <div id="tableId" ui-grid="gridOptions" ui-grid-edit
                        ui-grid-cellNav ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ui-grid-infinite-scroll="10"
                        class="grid">
                    <div class="error" ng-bind="results.error"></div>   
                    </div>
            </div>
        </div>
</div>
<div ui-layout="{flow : 'column'}" on-resize="ResizeFn()">
                <div class="viewer-container">
                    <div class="error" ng-bind="results.error"></div>
                    <textarea ui-codemirror="viewerOptions"
                        ng-model="results.translation"></textarea>
                </div>
                <div class="viewer-container">
                    <div class="error" ng-bind="results.planError"></div>
                    <textarea ui-codemirror="planViewerOptions" ng-model="results.plan"></textarea>
                </div>
        </div>
    </div>
</div>

Answer 1

您的按钮应更改您的视图可以看到的值。然后你可以根据值

来ng-if或ng-hide / ng-显示视图

这是一个非常简单的演示https://plnkr.co/edit/o0JUWuDETAAeYMmreoR7?p=preview

<body ng-app="demo" ng-controller="topCtrl as top">
    <button ng-click="top.setGrid()">Grid</button>
    <button ng-click="top.setList()">List</button>
    <div ng-if="top.button == 'grid'" ng-include="'grid.html'"></div>
    <div ng-if="top.button == 'list'" ng-include="'list.html'"></div>
</body>

Angularjs根据NavBar中的用户选择加载List.html或Grid.html

1 个答案: