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属性，那么一切正常，没有问题。我想使用表单的原因是利用表单验证。此外，现在，这可以工作，我可以在一个指令中使用相同的方案，该指令删除控制器的所有先前的下一个处理。

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

1 个答案: