HTML "First Time User" 形成最佳实践 (Jade / Angular)

Question

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

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

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

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

Answer 1

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

<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];
        }
    }]);

Answer 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>

HTML "First Time User" 形成最佳实践 (Jade / Angular)

HTML "First Time User" form best practice (Jade / Angular)

html

forms

angularjs

pug