mardi 31 mars 2020

Passing and printing checkboxes values JSON

I'm trying to create a CV-like generator with radiobuttons, input texts and checkboxes. I created 2 views/states. The 1st view is when the user inputs the values, and the 2nd view only prints the selected values. Until now, I managed to print the text input from the user and the selected value from the radio button, but I can't seem to find a way to pass the checkbox (checked: true) and print it.

Here's my code until now:

1st view (home state):

<ion-view view-title="Hello App">
  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">CV test</h1>
    </ion-header-bar>
    <ion-content>

      <li class="item">Input your name</li>
      <div class="list list-inset">
        <label class="item item-input">
          <input type="text" placeholder="Insert your name and last name" ng-model="username.name">
      </div>

      <li class="item">Higher degree of education obtained</li>
      <div class="list">
        <div class="item item-divider">
                     Selected Value: 
     </div>
     <ion-radio ng-repeat="item in mobileappsList"
                              ng-value="item.value"
                              ng-model="data.mobileapp">
                     
      </ion-radio>

      </div>

      <li class="item">Skills</li>
      <div class="list">

<ion-checkbox ng-repeat="item in skills" ng-model="item.checked" ng-value="item.checked">
           
        </ion-checkbox>

      </div>

      <button class="button button-block button-positive" ng-click="click()"> <!--button to let the user click and take some action -->
    Submit
    </button>

    </ion-content>
  </ion-pane>
</ion-view>

2nd view (submit state):

<ion-view view-title="Submit CV">
  <ion-content>
    <h1 class="title">Data submitted</h1>

    <h3 class="title">Name:</h3>
      <div class="item item-text-wrap">
      
    </div>

    <h3 class="title">Education:</h3>
      <div class="item item-text-wrap">
      
    </div>

    <h3 class="title">Skills:</h3>
      <div class="item item-text-wrap">
      
    </div>

</ion-content>
</ion-view>

3rd view (app.js):

var myapp = angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

    if (window.cordova && window.Keyboard) {
      window.Keyboard.hideKeyboardAccessoryBar(true);
    }

    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})


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

  .state('home', {
    url: '/home',
    templateUrl: 'templates/home.html',
    controller: 'HomeCtrl',
    params: {
      name: '',
      mobileapp: '',
      skills: ''
    }
  })

  .state('submit', {
    url: '/submit/:name'+':data'+':',
    templateUrl: 'templates/submit.html',
    controller: 'SubmitCtrl',
  })



$urlRouterProvider.otherwise('/home');



});

myapp.controller('HomeCtrl', function($scope, $state) {

  $scope.username={name: ""};

  $scope.supers={skills: ""};


    $scope.skills= [
       { text: "Programming", checked: true },
       { text: "Problem-solving skills", checked: false },
       { text: "Leadership", checked: false },
       { text: "IS management", checked: false },
       { text: "Communicator", checked: false }
     ];

    $scope.data = {mobileapp: ""};

    $scope.mobileappsList = [
      { text: "High school", value: "HS" },
      { text: "Bachelor", value: "BA" },
      { text: "Master", value: "MA" }
    ];
$scope.click = function(){
  $state.go('submit', {name:$scope.username.name, data:$scope.data.mobileapp, supers:$scope.supers.skills});
}

});


myapp.controller('SubmitCtrl', function($scope, $stateParams) {
console.log($stateParams);
$scope.name = $stateParams.name;
$scope.data = $stateParams.data;
$scope.supers = $stateParams.supers;


});

As you can see, I want to pass the pass and print the "Programming" text/value.

Thanks




Aucun commentaire:

Enregistrer un commentaire