ng-show后AngularJS ng-form输入字段不显示数据

Question

I'm working on a wizard style view that hides sections of a form in order to provide the form in wizard style chunks.

As you progress through the wizard and change panes the model behind the form is being updated, however if you go back to a previous pane the data no longer shows up in the input fields, but the Form still shows the $modelvalue and $viewvalue still populated with the data that was entered, the input just hasn't been updated.

I've created a plnkr that replicates the issue at http://plnkr.co/gG29JGa7o12GlBDo3sGm

and here is the code for the controller:

function wizard_controller($scope) {
    // Bindable properties and functions are placed on vm.
    $scope.title = 'franchisee_controller';
    $scope.steps = [{name: 'Chain Info', visible: true},
        {name: 'Franchise Info', visible: false},
        {name: 'Contact Info', visible: false},
        {name: 'Billing Info', visible: false},
        {name: 'Terms Info', visible: false}];
    $scope.currentStep = 0;
    $scope.franchisee = new Franchisee();
    $scope.franchisee.Abbr = 'fatcow';
    $scope.franchisee.Name = 'Fat Cow';
    $scope.franchisee.CompanyAddress1 = '600 Parker Square';

    $scope.isCurrentStep = function(index){
        if(index === $scope.currentStep){
            return 'current';
        }

        return '';
    };

    $scope.previousDisabled = function () {
        if ($scope.currentStep !== 0) {
            return false;
        }
        return true;
    };

    $scope.nextDisabled = function () {
        if ($scope.currentStep !== $scope.steps.length) {
            return false;
        }
        return true;
    };

    $scope.previous = function () {
        $scope.steps[$scope.currentStep].visible = false;
        $scope.currentStep -= 1;
        if ($scope.currentStep < 0) {
            $scope.currentStep = 0;
        }
        $scope.steps[$scope.currentStep].visible = true;
    };

    $scope.next = function(){
        $scope.steps[$scope.currentStep].visible = false;
        $scope.currentStep += 1;
        if ($scope.currentStep >= $scope.steps.length) {
            $scope.currentStep = $scope.steps.length - 1;
        }
        $scope.steps[$scope.currentStep].visible = true;
    };

    $scope.displaySubmit = function(){
        if ($scope.currentStep !== $scope.steps.length - 1) {
            return false;
        }
        return true;
    };

    //#region click handlers
    $scope.submitForm = function (model) {
        if ($scope.franchiseeWizard.$valid) {
            angular.extend($scope.franchisee, model);
            console.log($scope.franchisee);
        }
    };
    //#endregion

    //#region message handlers

    //#endregion

    //#region init methods
    $scope.init = function () {
    };

    $scope.init();

    //#endregion
}

Does anyone have an idea on how I can get the input fields to retain the data so the user can go back and forth in the wizard. Using ng-switch isn't much of an option since it requires the use of $parent to bind the ng-model for each of the input fields.

Answer 1

So this seems to be an issue with the way the browser form element is handling the hiding and showing of input elements.

If you change the form tag and replace it with a div and ng-form attribute then everything works fine without an issue. The reason I want to use forms is to take advantage of the form validation. Also, now that this works I can utilize this same scheme in a directive that removes all of the previous next handling out of the controller.