0

我是 Angular 的新手，并且已经阅读了所有教程，但我刚刚开始构建自己的应用程序，所以我处于学习曲线的陡峭位！

我正在制作一份问卷。我想一次显示一个问题，以及每个屏幕上偶尔出现的可选内容（取决于问题的答案）。

我的问题是关于在我的控制器中构建它的最干净的方法。

目前我的 HTML 如下所示：

<div ng-show="showIntro"> <!-- Intro, shown by default -->
  Intro
  <button ng-click="nextIntro">Next</button>
</div>

<div ng-show="showQ1"> <!-- Question 1, shown after the user clicks Next -->
  Question 1

<label class="checkbox-inline"> <!-- Radio buttons for user response -->
  <input type="radio" name="ast-adh-p1-q1" ng-model="q1aVal" 
   ng-change='answerQ1(q1aVal)' value="yes"> Yes
</label>
<label class="checkbox-inline">
  <input type="radio" name="ast-adh-p1-q1" ng-model="value" 
  ng-change='answerQ1(value)' value="no"> No
</label>

 <div ng-show="showQ1extra"> <!-- Shown if user answers yes to question 1 -->
   some extra content if the user answers yes to question 1 here
 </div>

 <button ng-click="nextQ1">Next</button>

</div>

<div ng-show="showQ2"> <!-- Question 2, shown after completing question 1 -->
  Question 2 ...
</div>

我的控制器看起来像这样：

    $scope.showIntro = true;
    $scope.showQ1 = false;
    $scope.showQ1extra = false;
    $scope.showQ2 = false;

    $scope.nextIntro = function() {
      $scope.showIntro = false;
      $scope.showQ1 = true;
    }

    $scope.answerQ1 = function(q1aVal) {
      $scope.showQ1extra = (q1aVal === 'yes') ? true : false;
    }

    $scope.nextQ1 = function() {
      $scope.showQ1 = false;
      $scope.showQ1extra = false;
      $scope.showQ2 = true;
    }

它有效，但不优雅且不可扩展。有没有更明智的 Angular 方式来做到这一点？

我自己的感觉是应该有一个$scope.activeSection参数，也就是一个数字，初始设置为0。然后showIntro应该return$scope.activeSection === 0等等，应该有一个Next按钮，activeSection每次加1。这听起来像 Angular 友好的做事方式吗？

更新：这是一个带有示例代码的 plunker：http ://plnkr.co/edit/Ursyhc7YJYbJS5OCGYEr?p=preview

4

1 回答 1

1

您可以使用“ngSwitch”指令用少量代码解决这个问题。

HTML：

<div ng-switch="step">
    <div ng-switch-when="1">
        <p>This is step 1</p>
        <button ng-click="setStep(2)" class="btn btn-success">Go to step 2</button>
    </div>
    <div ng-switch-when="2">
        <p>This is step 2</p>
        <button ng-click="setStep(3)" class="btn btn-success">Go to step 3</button>
    </div>
    <div ng-switch-when="3">
        <p>This is step 3</p>
        <button ng-click="setStep(1)" class="btn btn-success">Back to start</button>
    </div>
</div>

在你的控制器中：

$scope.step = 1;
$scope.setStep = function (num) {
    $scope.step = num;
};

你可以在这里查看结果：http: //jsfiddle.net/Gg92r/

于 2013-11-12T16:34:13.993 回答