Question

我正在尝试使用HTML示例学习Angular JS。我希望用户填写一些基本信息，并根据他们选择的复选框，它将使用UI路由加载表单页面。它将根据所选的复选框生成自动导航页面的链接。然后，一旦表单完成，它应保存在服务器上的目录中，并下载到用户计算机。

我得到了将所有数据显示为json数组的表单，但是在尝试添加创建核对表链接的功能后，现在没有任何工作，如导航和保存？

App.js

创建我们的角度应用并注入ngAnimate和ui-router

angular.module('formApp', ['ngAnimate', 'ui.router'])

//configuring our routes 

.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider

    // route to show our basic form (/form)
    .state('form', {
        url: '/form',
        templateUrl: 'form.html',
        controller: 'formController'
    })

    // nested states 
    // each of these sections will have their own view
    // url will be nested (/form/profile)
    .state('form.profile', {
        url: '/profile',
        templateUrl: 'form-profile.html'
    })

    // url will be /form/interests
    .state('form.interests', {
        url: '/interests',
        templateUrl: 'form-interests.html'
    })

    // url will be /form/payment
    .state('form.payment', {
        url: '/payment',
        templateUrl: 'form-payment.html'
    });

// catch all route
// send users to the form page 
$urlRouterProvider.otherwise('/form/profile'); })

// our controller for the form //
.controller('formController', function ($scope) {

// we will store all of our form data in this object

$scope.prefContactArray = [];
$scope.prefContactArray.push({ name: "Text", reply: "Great we'll text you.", isDefault: false });
$scope.prefContactArray.push({ name: "Email", reply: "Great we'll send you an email!", isDefault: false });
$scope.prefContactArray.push({ name: "Phone", reply: "Great we'll give you a call.", isDefault: false });

$scope.selectedprefContact = $scope.prefContactArray.name;
$scope.selectedprefContactReply = $scope.prefContactArray.reply;

 $scope.fruitsList = [
{ id: 1, name: 'Apple', url: 'form/profile.html', state:'.profile' },
{ id: 2, name: 'Banana', url: 'form/interests.html', state:'.interests' },
{ id: 3, name: 'Guava', url: 'form/payment.html', state:'payment' }
 ];


    $scope.selected = {
       fruitsList: []
    };

    $scope.checkAll = function () {
        $scope.selected.fruitsList = angular.copy($scope.fruitsList);
    };
    $scope.uncheckAll = function () {
        $scope.selected.fruitsList = [];
    };

    $scope.create = function () {
        var aTag = document.createElement('a ui-sref-active="active" ui-sref="fruitsList.state"
alt="fruitsList.name"');
        status-buttons.appendChild(aTag);
        $state.go($scope.selected.fruitsList.url);
    };

    $scope.formData = {};


   $scope.submit = function downloadFile(fileName, urlData) {
        var aLink = document.createElement('a');
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("click");
        aLink.download = fileName;
        aLink.href = urlData;
        aLink.dispatchEvent(evt);
    }

   var data = $scope.formData;
    downloadFile('test.csv', 'data:text/csv;charset=UTF-8,' + encodeURIComponent(data));



});

Form.html

<div id="form-container">

    <div class="page-header text-center">
        <h2>Let's Be Friends</h2>

        <!-- the links to our nested states using relative paths -->
        <!-- add the active class if the state matches our ui-sref -->
        <div id="status-buttons" class="text-center">
            <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
            <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
            <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
        </div>
    </div>
    <div id="splitscreen">
        <!-- use ng-submit to catch the form submission and use our Angular function -->
        <form id="signup-form" ng-submit="createQuote()">
            <div id="userPanel" class="col-md-6" style="background-color:#999; z-index:2;">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" name="name" ng-model="formData.name">
                </div>

                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" class="form-control" name="email" ng-model="formData.email">
                </div>

                <div class="form-group">
                    <label for="email">Phone</label>
                    <input type="text" class="form-control" name="email" ng-model="formData.phone">
                </div>

                <div class="form-group">
                    <label for="email">Website</label>
                    <input type="text" class="form-control" name="email" ng-model="formData.web">
                </div>

                <div ng-repeat="prefContact in prefContactArray">
                    <label>
                        <input type="radio" ng-value="prefContact.reply" ng-model="$parent.selectedprefContact" />
                        {{prefContact.name}}

                    </label>
                </div>{{selectedprefContact | json}}



                <div>
                    <label ng-repeat="fruit in fruitsList">
                        <input type="checkbox" checklist-model="selected.fruitsList" checklist-value="fruit.id"
ng-click="create()" /> {{fruit.name}}<br />
                    </label>
                    <button ng-click="checkAll()">Check all</button>
                    <button ng-click="uncheckAll()">Uncheck all</button> <br />
                    {{selected.fruitsList}}

                </div>

                </div>


                </div>
            <pre>
    {{ formData }}
</pre>
            <div id="questions" class="col-md-6">
                <!-- our nested state views will be injected here -->
                <div id="form-views" ui-view></div>
            </div> </form>
    </div>
</div>

<!-- show our formData as it is being typed -->

提交按钮页

谢谢你的钱！

<button type="submit" class="btn btn-danger">Submit</button> </div>

索引

<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

<!-- JS -->
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="app.js"></script>

</head>

<!-- apply our angular app --> <body ng-app="formApp">

 <div class="container col-md-12">

    <!-- views will be injected here -->
    <div class="col-md-12" ui-view></div>

</div>

Answer 1

在create()函数中，您使用的$state.go($scope.selected.fruitsList.url)将更改为新状态，但值是模板路径而不是状态路径。

您应该使用$state.go($scope.selected.fruitsList.state)，因为$state.go()的'to'参数应该是要转换到的状态的名称或相对状态路径。如果路径以^或.开头，那么它是相对的，否则它是绝对的。

Answer 2

$状态

正如@Andorov已经提到的，你需要$state来导航。 UI路由器提供此服务，使您可以轻松地从一个州（或路由或页面）转到另一个州。将依赖项添加到控制器，如下所示：

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

您现在可以在控制器中说出$state.go('form.payment')之类的内容。这会将此人导航到付款表单。

所以你现在需要做的就是当他们提交表单时（例如你的$scope.createQuote()函数里面还没有包含在代码中），找出你应该去哪个状态并结束$state.go(stateToGoto)。

提示：

当我开始使用UI路由器和AngularJs时，我只是将每个路径都设置为自己的页面，而不是使用子项。如果你这样做，你会得到：

表格的路线
可以去的每个页面的路线。

每个路由都有自己的控制器，这使得将代码放在正确的位置变得容易。我不喜欢在孩子之间共享控制器，因为它更难以理解代码的哪一部分是针对哪个孩子的。

这有帮助吗？

基于复选框选择的AngularJS路由

谢谢你的钱！

2 个答案:

$状态

提示：