title: AngularJS Routing based on Checkbox Selection
body: <p>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.</p>
  
  <p>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? </p>
  
  <p>App.js</p>
  
  <p>create our angular app and inject ngAnimate and ui-router</p>
  
  <blockquote>
  <pre><code>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));
  
  
  
  });
  </code></pre>
  </blockquote>
  
  <p>Form.html</p>
  
  <blockquote>
    <p>  </p>
  
  <pre><code>&lt;div id="form-container"&gt;
  
      &lt;div class="page-header text-center"&gt;
          &lt;h2&gt;Let's Be Friends&lt;/h2&gt;
  
          &lt;!-- the links to our nested states using relative paths --&gt;
          &lt;!-- add the active class if the state matches our ui-sref --&gt;
          &lt;div id="status-buttons" class="text-center"&gt;
              &lt;a ui-sref-active="active" ui-sref=".profile"&gt;&lt;span&gt;1&lt;/span&gt; Profile&lt;/a&gt;
              &lt;a ui-sref-active="active" ui-sref=".interests"&gt;&lt;span&gt;2&lt;/span&gt; Interests&lt;/a&gt;
              &lt;a ui-sref-active="active" ui-sref=".payment"&gt;&lt;span&gt;3&lt;/span&gt; Payment&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="splitscreen"&gt;
          &lt;!-- use ng-submit to catch the form submission and use our Angular function --&gt;
          &lt;form id="signup-form" ng-submit="createQuote()"&gt;
              &lt;div id="userPanel" class="col-md-6" style="background-color:#999; z-index:2;"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="name"&gt;Name&lt;/label&gt;
                      &lt;input type="text" class="form-control" name="name" ng-model="formData.name"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label for="email"&gt;Email&lt;/label&gt;
                      &lt;input type="text" class="form-control" name="email" ng-model="formData.email"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label for="email"&gt;Phone&lt;/label&gt;
                      &lt;input type="text" class="form-control" name="email" ng-model="formData.phone"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label for="email"&gt;Website&lt;/label&gt;
                      &lt;input type="text" class="form-control" name="email" ng-model="formData.web"&gt;
                  &lt;/div&gt;
  
                  &lt;div ng-repeat="prefContact in prefContactArray"&gt;
                      &lt;label&gt;
                          &lt;input type="radio" ng-value="prefContact.reply" ng-model="$parent.selectedprefContact" /&gt;
                          {{prefContact.name}}
  
                      &lt;/label&gt;
                  &lt;/div&gt;{{selectedprefContact | json}}
  
  
  
                  &lt;div&gt;
                      &lt;label ng-repeat="fruit in fruitsList"&gt;
                          &lt;input type="checkbox" checklist-model="selected.fruitsList" checklist-value="fruit.id"
  ng-click="create()" /&gt; {{fruit.name}}&lt;br /&gt;
                      &lt;/label&gt;
                      &lt;button ng-click="checkAll()"&gt;Check all&lt;/button&gt;
                      &lt;button ng-click="uncheckAll()"&gt;Uncheck all&lt;/button&gt; &lt;br /&gt;
                      {{selected.fruitsList}}
  
                  &lt;/div&gt;
  
                  &lt;/div&gt;
  
  
                  &lt;/div&gt;
              &lt;pre&gt;
      {{ formData }}
  &lt;/pre&gt;
              &lt;div id="questions" class="col-md-6"&gt;
                  &lt;!-- our nested state views will be injected here --&gt;
                  &lt;div id="form-views" ui-view&gt;&lt;/div&gt;
              &lt;/div&gt; &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- show our formData as it is being typed --&gt;
  </code></pre>
    
    <p> </p>
  </blockquote>
  
  <p>Submit Button Page</p>
  
  <blockquote>
    <p> 
        
        <h3>Thanks For Your Money!</h3></p>
  
  <pre><code>&lt;button type="submit" class="btn btn-danger"&gt;Submit&lt;/button&gt; &lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p>Index</p>
  
  <blockquote>
    <p>   
        </p>
  
  <pre><code>&lt;!-- CSS --&gt;
  &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  
  &lt;!-- JS --&gt;
  &lt;!-- load angular, nganimate, and ui-router --&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;!-- apply our angular app --&gt; &lt;body ng-app="formApp"&gt;
  
   &lt;div class="container col-md-12"&gt;
  
      &lt;!-- views will be injected here --&gt;
      &lt;div class="col-md-12" ui-view&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
    
    <p> </p>
  </blockquote>