Question

我是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应该返回$scope.activeSection === 0等，然后应该是一个Next按钮，每次增加activeSection 1。这听起来像一个Angular友好的做事方式吗？

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

Answer 1

您可以使用the "ngSwitch" directive以极少量代码解决此问题。

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/

如何在Angular中切换视图？

1 个答案: