0

我是 angularjs 的新手，我使用的是 1.5.8 版（我无法升级）。我正在尝试使用 ng-repeat

基于此示例的角度向导。但是，我的问题步骤ng-repeat="question in vm.questions"，不再重复。下面是我的代码。请指教。

html

<form class="login-form idoquestion" name="idForm" id="idForm" novalidate ng-controller="iCtrl as vm">
<wizard hide-indicators="true" indicators-position="top">
    <wz-step wz-title="Starting">
        <h3 class="form-title">Begin</h3><br />
        <div class="form-actions" style="padding-bottom: 55px">
            <div class="pull-right" style="padding-top: 10px;">
                <button type="submit" wz-next ng-disabled="!vm.disableNext" class="btn blue"> Next </button>
            </div>
        </div>
    </wz-step>
    <wz-step wz-title="Question" ng-repeat="question in vm.questions">
        <h3 class="form-title">Question {{$index}}</h3>
        <input type="radio" name="questionName" ng-value="question.answers" ng-model="vm.selectedAnswers[$index]" />
        <label>{{ question.questionName }}</label>
        <div class="pull-right" style="padding-top: 10px;">
            <button type="submit" wz-next class="btn blue"> Next </button>
        </div>
    </wz-step>
    <wz-step wz-title="More steps">
        <span>Finish</span><br /><br />
        <div class="form-actions" style="padding-bottom: 55px">
            <div class="pull-right" style="padding-top: 10px;">
                <button type="submit" wz-next class="btn blue" ng-click="vm.finishWizard()"> Exit </button>
            </div>
        </div>
    </wz-step>
</wizard>
</form>

控制器

(function () {
'use strict';

angular
    .module('app')
    .controller('iCtrl', iCtrl);

    iCtrl.$inject = ['$scope', '$window', '$location', '$routeParams', 'modalService', 'userSession'];

function iCtrl($scope, $window, $location, $routeParams, modalService, userSession) {
    var vm = this;
    vm.questions = [];
    vm.answers = [];
    vm.selectedAnswers = [];
    vm.disableNext = true;

    init();
    function getQuestions() {
        var q1 = {
            questionName: 'At which of the following addresses have you lived?',
            answers: ['4344 BACKTRAIL DR', '113 BIRCH DR', '5015 B U BOWMAN DR', 'None of the above']
        }
        var q2 = {
            questionName: 'What is the approximate square footage of the property at 222333 PEACHTREE PLACE?',
            answers: ['1,000 or less', '1,001 - 1,500', '1,501 - 2,000', 'None of the above']
        }
        var q3 = {
            questionName: 'At From whom did you purchase the property at 222333 PEACHTREE PLACE?',
            answers: ['4344 BACKTRAIL DR', '113 BIRCH DR', '5015 B U BOWMAN DR', 'None of the above']
        }
        vm.questions.push(q1);
        vm.questions.push(q2);
        vm.questions.push(q3);
        vm.selectedAnswers = new Array(vm.questions.length);
    }

    vm.finishWizard = function finishWizard() {
        console.log('Wizard finished!');
    }

    function init() {
        getQuestions();
    }
}
})();
4

1 回答 1

0

所以这个问题与代码无关，而是与动态步骤有关。由于这些步骤是动态的，因此它们被插入到最后。我是通过这个帖子发现的。

于 2020-03-13T20:38:51.347 回答