使用AngularJS的表单向导

时间:2018-08-14 09:15:52

标签: formwizard

此代码是一个使用angularjs ..的简单表单向导。我的问题是,当我单击(PreviousBtn)时,它清除了先前的数据..因此,我声明了一个变量来保存数据,无论执行什么步骤..但它适用于前一个{$ scope.selectedoutjobForCompanion = vm.postedValues.selectedoutjobForCompanion; },并没有为第二个工作 {$ scope.selectedLeader = vm.postedValues.selectedLeader;}。且没有错误,我使用{console.log($ scope.selectedLeader)}检查了赋值操作,它起作用了,但在html中没有反映;

    var vm = this;
    vm.step = "one";
    vm.stepOne = stepOne;
    vm.stepTwo = stepTwo;
    vm.stepThree = stepThree;
    vm.stepFour = stepFour;
    vm.postedValues = {};
   

    function stepOne() {
        vm.step = "one";
        $scope.selectedoutjobForCompanion = vm.postedValues.selectedoutjobForCompanion;      
        $scope.selectedLeader = vm.postedValues.selectedLeader; // this is the Problem    
        console.log($scope.selectedLeader); // this line works, i checked it.
    }
 
    function stepTwo() {
        vm.step = "two";
        
    }

    function stepThree() {
        vm.step = "three";
    }

    function stepFour() {
        vm.step = "four";
    }


$scope.selectedoutjobChangedForCompanion = function (selectedoutjobForCompanion) {       
$scope.postedLeader.Out_Job_ID = selectedoutjobForCompanion.Out_Job_ID;
  
vm.postedValues.selectedoutjobForCompanion =selectedoutjobForCompanion;
    }
 
    $scope.selectedLeaderChanged = function (selectedLeader) {
        vm.postedValues.selectedLeader = selectedLeader;
        $scope.postedLeader.Emp_ID = selectedLeader.Emp_ID;
        $scope.postedLeader.Out_Job_Emp_Type = 2;// 2 = Leader   
        
    }
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

 <div class="=jumbotron">
                            <form ng-controller="outjobsController as vmForm">
                                <div ng-switch="vmForm.step">
                                   
                                    
                                    <div class="stepone" ng-switch-when="one">
                                        <h3>Step 1</h3>

                                        <div class="form-group">

                                            <label class="control-label col-md-2 col-sm-3 col-xs-12">
                                                Out Job Name : <span class="required">*</span>
                                            </label>

                                            <div class="col-md-7 col-sm-7 col-xs-12">
                                                <select required class="form-control" ng-options="job as job.Out_Job_Name  for job in outJobsTBl"
                                                        ng-model="selectedoutjobForCompanion" ng-change="selectedoutjobChangedForCompanion(selectedoutjobForCompanion)">
                                                    <option value=''> --Select Out Job-- </option>
                                                </select>
                                            </div>

                                            <div class="col-md-3 col-sm-3 col-xs-12">
                                                <select disabled class="form-control" ng-options="job as job.Out_Job_ID  for job in outJobsTBl"
                                                        ng-model="selectedoutjobForCompanion">
                                                    <option value=''> --Code-- </option>
                                                </select>
                                            </div>

                                        </div>



                                        <div class="form-group">
                                            <label class="control-label col-md-2 col-sm-3 col-xs-12">
                                                Creator of Out Job: <span class="required">*</span>
                                            </label>

                                            <div class="col-md-10 col-sm-5 col-xs-12" ng-controller="empsController">
                                                <div ng-repeat="emp in emps | filter : authentication.userName: emp.Emp_UserName">
                                                    <div ng-hide="1">
                                                        {{postedCreator.Emp_ID = emp.Emp_ID}} {{postedCreator.Out_Job_Emp_Type = 1}}
                                                    </div>

                                                    <input type="text" disabled ng-model="emp.Emp_UserName" class="form-control col-md-7 col-xs-12">

                                                </div>
                                            </div>

                                        </div>



                                        <div class="form-group">
                                            <label class="control-label col-md-2 col-sm-5 col-xs-12">
                                                Leader: <span class="required">*</span>
                                            </label>

                                            <div class="col-md-10 col-sm-5 col-xs-12" ng-controller="empsController">
                                                <select required class="form-control" ng-options="emp as emp.Emp_UserName  for emp in emps"
                                                        ng-model="selectedLeader" ng-change="selectedLeaderChanged(selectedLeader)">
                                                    <option value=''> -- Select Leader  -- </option>
                                                </select>

                                            </div>

                                        </div>



                                        <br><br><br><br>
                                        <div class="text-left col-md-2 col-sm-1 col-xs-12">                           
                                            <button type="button" class="btn btn-primary" ng-click="vmForm.stepTwo()">Next</button>
                                        </div>

                                       
                                    </div>
                                    <div class="stepTwo" ng-switch-when="two">
                                        <h3>Step 2</h3>




                                            <br><br><br><br>
                                            <div class="text-left col-md-2 col-sm-1 col-xs-12">
                                                <button type="button" class="btn btn-warning" ng-click="vmForm.stepOne()">Previous</button>
                                            </div>
                                            <div class="text-left col-md-2 col-sm-1 col-xs-12">
                                                <button type="button" class="btn btn-primary" ng-click="vmForm.stepThree()">Next</button>
                                            </div>
                                        </div>
                                    
                                    <div class="stepThree" ng-switch-when="three">
                                        <h3>Step 3</h3>


                                        </div>

                                    


                                        <br><br><br><br>
                                        <div class="text-left col-md-2 col-sm-1 col-xs-12">
                                            <button type="button" class="btn btn-warning" ng-click="vmForm.stepTwo()">Previous</button>
                                        </div>
                                        <div class="text-left col-md-2 col-sm-1 col-xs-12">
                                            <button type="button" class="btn btn-primary" ng-click="vmForm.stepFour()">Next</button>
                                        </div>
                                    </div>

                                    <div class="stepfour" ng-switch-when="four">
                                        <h3>Step 4</h3>



                                        <br><br><br><br>
                                        <div class="text-left col-md-2 col-sm-1 col-xs-12">
                                            <button type="button" class="btn btn-warning" ng-click="vmForm.stepThree()">Previous</button>
                                        </div>
                                        <div class="text-left col-md-2 col-sm-1 col-xs-12">
                                            <button type="button" class="btn btn-success" ng-click="CreatCompanions()">Submit</button>
                                        </div>
                                    </div>

                                </div>
                            </form>
                        </div>

0 个答案:

没有答案