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

Question

我正在开发一个隐藏表单部分的向导样式视图，以便以向导样式块的形式提供表单。

随着您完成向导并更改窗格，表单后面的模型正在更新，但是如果您返回上一个窗格，数据不再显示在输入字段中，但表单仍显示 $modelvalue 和$viewvalue 仍然填充了输入的数据，只是还没有更新输入。

我创建了一个 plnkr，在 http://plnkr.co/gG29JGa7o12GlBDo3sGm 上复制了该问题

这是控制器的代码：

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
}

有没有人知道如何让输入字段保留数据，以便用户可以在向导中来回切换。使用 ng-switch 并不是一个很好的选择，因为它需要使用 $parent 为每个输入字段绑定 ng-model。

Answer 1

所以这似乎是浏览器表单元素处理输入元素隐藏和显示的方式的问题。

如果您更改表单标签并将其替换为 div 和 ng-form 属性，则一切正常，没有问题。我想使用表单的原因是利用表单验证。此外，既然这有效，我可以在指令中使用相同的方案，从控制器中删除所有先前的下一个处理。