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