Question

我只是因为这个项目的范围蔓延/变化而被抛出一个循环。

最初，页面上有6个按钮（带有其他东西），触发到6个不同的Add New ... Forms的路径。我把所有的按钮连接到路线并工作。

周五，UIX领导人决定登陆页面过于复杂，并让利益相关者相信单一的“添加新请求”＃34;需要按钮导致下拉，用户可以选择正确的表格。

所以我的模板看起来像这样：

<form>
    <div class="row">
        <div class="form-group col-lg-12">
            <label for="requestType">What type of request would you like to create?
                <span class="required">*</span>
            </label>
            <select class="form-control" name="requestType" ng-model="requestType" ng-change="new_form_select()">
                <option value="0">Please Select ...</option>
                <option value="1">IT Web Task</option>
                <option value="2">SAP Task</option>
                <option value="3">Email Campaign</option>
                <option value="4">Third Party Suppression</option>
                <option value="5">Report Request</option>
                <option value="6">Other / I'm Not Sure</option>                        
            </select>
         </div>
        </div>
      </form>

我有webtask.html，saptask.html，campaign.html，suppression.html，report.html，generalrequest.html的模板。

我意识到，当我走到这一步时，我不知道下一步该做什么。我应该将所有这些表单隐藏在同一页面上并根据选择显示它们（我甚至可以这样做吗？）或者我应该选择一种页面跳转菜单并在选择时加载适用的表单（我是否这样做）在控制器中？）

天啊，我输了！

毋庸置疑，这是我的第一个Angular项目......我曾经使用纯jQuery并且正在学习AngularJS。

任何指导都非常感谢!!!

Answer 1

我无法为您解决此问题，但我可以指导您完成简单解决方案的主要步骤：

查看angular-ui-router

您选择更改时调用的方法将重定向到所选表单的状态：

<select class="form-control"
        name="requestType"
        ng-model="requestType"
        ng-change="new_form_select()">

    <option value="0">Please Select ...</option>
    <option value="webtask">IT Web Task</option>
    <option value="saptask">SAP Task</option>
    ....  
</select>

$scope.new_form_select = function() {
    if(requestType) {
        location.href = '#/' + requestType;
    }
}

您现在需要定义状态并链接模板。 Angular-UI-Router在它的文档中有一些例子，但它可能是：

.state('webtask', {
    url: "/webtask",
    templateUrl: "templates/webtask.html",
    controller: function() {

    }
})
.state('saptask', {
    url: "/saptask",
    templateUrl: "templates/saptask.html",
    controller: function() {

    }
})
// you get the idea..

现在您需要添加标记，这些模板将放置在您的页面中。 Angular-UI-Router再次举例说明了如何做到这一点：
```
<body>
    

    
    <div ui-view></div>
</body>
```

当然，您需要在主控制器的配置中添加$ stateProvider，$ urlRouterProvider，但所有这些都在Angular-UI-Router页面中进行了解释。

AngularJS：基于Select Control确定模板

1 个答案: