多视图表单 AngularJS 重新路由

Question

我一直在试验几种创建此表单的方法。 Scotch 似乎有一个很棒的嵌套视图教程。

这是我认为出现问题的 JS 文件的一部分。我在 http://plnkr.co/edit/nNTEI4tBw0XFana1nKIS?p=preview 创建了一个演示。

.controller('formController', function($scope) {

    // we will store all of our form data in this object
    $scope.formData = {};

    // function to process the form
    $scope.processForm = function() {
        if ($scope.formData = '"phone":"iphone' &&'"type":"xbox"'){
            parent.location='results';
        }
    };

});

如何让提交按钮重新路由到 results.html？（如果我的 JS 不够原始，我不会感到惊讶）任何帮助都是极好的。

Answer 1

有两件事需要完成。首先，如果你检查你的 $scope.formData 对象，你可以看到它有两个属性 phone 和 type，所以你在 if 块中检查它的方式不正确。以下是控制器更改：

.controller('formController', function($scope, $location) {

    // we will store all of our form data in this object
    $scope.formData = {};

    // function to process the form
    $scope.processForm = function() {

        if ($scope.formData.phone == 'iphone' && $scope.formData.type == 'xbox'){

            $location.path('/results');
        }
    };

});

接下来，必须为 results 路由配置路由。只需要在您的路线配置中添加：

.state('results', {
    url: '/results',
    templateUrl: 'results.html'
});

这是一个分叉的 Plunker：http://plnkr.co/edit/GUpNMRPU0YqfOcveB0nP?p=preview

多视图表单 AngularJS 重新路由

Multi-View Form AngularJS reroute

javascript

angularjs

angular-ui-router