Как переключить виды в угловом?

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

Он работает, но некрасиво и не масштабируется. Есть ли более разумный, Угловой способ сделать это?

Мое собственное ощущение, что там должен быть параметр $scope.activeSection, то есть число, которое изначально устанавливается равным 0. Тогда showIntro должен возвращать $scope.activeSection === 0, и т.д., и там должен быть один Next кнопка, которая увеличивает activeSection на 1 каждый раз. Это звучит как Угловой способ сделать что-то?

Update: Вот 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/