1

我正在尝试根据单页应用程序中的用户交互加载不同的表单。ng-view 很有帮助，直到我不得不在同一页面的不同 div 中加载/隐藏表单。

在此处输入图像描述

div#1：它将具有从 ng-repeat 填充的目录名称。
div#2：应该根据顶部导航的按钮点击填充表单（订单/时间表/列表）。
div#3：只应在用户选择 div#1 中的目录时填充子目录列表。

索引.html

<div class="left_column">
    <ul>
    <li ng-repeat="catalog in catalogs">{{ catalog }}</li>
</ul>
</div>    
<div class="top_row">
    <ng-view></ng-view>
</div>  
<div class="bottom_row">
    <ng-view></ng-view>
</div>

应用程序.js

myApp.config(function($routeProvider){

    $routeProvider
        .when('/orderForm', { 
            templateUrl: '/orderForm.html',
            controller: 'orderFormController'
        })
        .when('/scheduleForm', { 
            templateUrl: '/views/html/parameterForm.html',
            controller: 'parameterFormController'
        })
        .when('/subCataloglist', { 
            templateUrl: '/subCataloglist.html',
            controller: 'subController'
        })
});

如何在单个页面中一次加载不同的表单？多视图逻辑有更好的例子吗？

4

1 回答 1

1

我认为这种尝试是不正确的。我只看到了一个 ng-view，它可以根据视图 url 更改附加的类。但在这里我提出了更简单的架构。使用一个视图。在这个视图中，按原样在 div1 中执行 ng-repeat。在 div2 中执行 ng-if 语句并通过单击按钮将其连接起来。div 三个类似 - 您可以使用 ng-show 或 ng-if。ng-if 不在 dom 中渲染，ng-show 渲染但隐藏。

<div class="top_row">
    <form id="form1" ng-if="selval=1">
    </form>
    <form id="form2" ng-if="selval=2">
    </form>
</div>

菜单：

<ul>
    <li><a href="javascript:void(0)" ng-click="sel(1)">order</a></li>
    <li><a href="javascript:void(0)" ng-click="sel(2)">schedule</a></li>

附加到当前 html 视图的控制器：

$scope.sel = function(n){
    $scope.selval = n;
}

由于双向绑定是以角度实现的，它将自动工作。

于 2016-02-16T02:05:21.063 回答