I am trying to learn Angular JS with an HTML Sample. I would like the user to fill out some basic information, and based on the checkbox they select, it will load a form page using the UI Routing. It will generate links to navigate the page automatically, based on the checkboxes selected. Then, once the form is complete it should save in a directory on the server, and download to the user computer.
I got the form to show all data as json array, but now nothing is working after trying to add the ability to create the checklist links, as navigation, and saving?
App.js
create our angular app and inject ngAnimate and 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 -->
Submit Button Page
Thanks For Your Money!
<button type="submit" class="btn btn-danger">Submit</button> </div>
Index
<!-- 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>
