Question

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

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

的index.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>

app.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'
        })
});

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

Answer 1

我认为这种尝试不正确。我只看到一个ng-view，可以根据视图url更改附加的类。但在这里我提出了更简单的架构。使用一个视图。在这个视图中，在div1中执行ng-repeat。在div2中执行ng-if语句并将其与单击按钮连接。 div three simillar - 你可以使用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;
}

由于双向绑定是以角度方式实现的，因此它将自动运行。

用于单页面应用程序中的多表单加载的ng-view

1 个答案: