HTML“首次用户”表单最佳实践（Jade / Angular）答案

【问题标题】：HTML "First Time User" form best practice (Jade / Angular)HTML“首次用户”表单最佳实践（Jade / Angular）
【发布时间】：2015-05-18 11:47:45
【问题描述】：

所以我正在尝试在我的应用中实现以下表单。

这是用户第一次尝试在我们的应用中创建任务时应该出现的表单。现在我的问题是，处理这样的事情的最佳方法是什么？我不是一个非常好的前端人员，这可能是一个微不足道的问题，如果是，我很抱歉 - 不过，我不知道答案。

我对组件等没那么好奇，这些都可以，但对流程更感兴趣。 html/js中的东西应该怎么组织？我是否每次都创建一个单独的按钮，是否应该以某种方式动态插入元素..等

任何帮助都会很棒，谢谢！

【问题讨论】：

有多种方法可以完成您在此处描述的任务。我可能会尝试为你提出一个方向的建议；但是，我担心这个问题可能会因为缺乏焦点和缺少代码而面临投反对票/接近投票的危险。似乎没有一个明确的问题。相反，它表现为请求某人将您推向正确的方向，感觉就像您没有尝试自己解决它。
是的，我想要一个方向而不是代码 sn-ps 或者整个问题都解决了。问一个方向有那么糟糕吗？此外，您的评论完全没有帮助。
我的评论旨在帮助您改写您的问题，以降低被投票结束的可能性。然而，我确实添加了一个答案，正如我所说的那样。
请记住，Stack Overflow 是一个知识库，当您提出一个问题并且答案非常清楚地解决了问题并且问题本身对可能遇到相同问题的其他人有用时，它的效果最好未来的问题。越关注问题越好。
我知道，但概念也受到质疑，而且这种“逐步”形式的概念并不是我见过的很多讨论......任何地方。我知道有更多经验的有才华的人已经遇到过这个问题，这就是为什么我发布了一个更“笼统”的问题，你瞧，有才华的人回答并指出了我（我认为）正确的方向。

标签： html angularjs forms pug

【解决方案1】：

您可以为此使用角度指令，根据其他值动态显示它们。这应该会让你朝着正确的方向前进：

<label for="taskName">Task name:</label>
<input type="text" name="taskName"
       ng-model="task.name" />

<div ng-show="currentStep > 1">
    <label for="assigned">Assigned:</label>
    <select>
        <!-- options etc. -->
    </select>
</div>

<div>
    <button class="btn btn-default"
            ng-click="nextStep()">{{ currentStep.nextText }}</button>
</div>

控制器：

.controller("MyCtrl",
    ["$scope", function($scope) {
        $scope.steps = [
            { number: 1, nextText: "Let's go!" },
            { number: 2, nextText: "Next, please" }
        ];

        $scope.task = {};

        $scope.currentIndex = 0;
        $scope.currentStep = $scope.steps[$scope.currentIndex];

        $scope.nextStep = function (){
            $scope.currentIndex += 1;
            $scope.currentStep = $scope.steps[$scope.currentIndex];
        }
    }]);

【讨论】：

谢谢！我在考虑这个方向

【解决方案2】：

Angular 有一个built in directive 用于这种过程，ngSwitch。使用它，您可以定义一系列步骤，并根据您在流程中所处的步骤的值更改显示。

<form ng-switch="wizardStep">
    <div ng-switch-when="Step1">This is Step 1</div>
    <div ng-switch-when="Step2">This is Step 2</div>
</form>

【讨论】：

可爱，我不知道这个。谢谢