.
103 Ionic Creator Form Data (Order Your Pizza)
1. Create a new project.
Project Name = Order Your Pizza
Template=Blank Page
2. Select Component
Add Select Component to Home Page.
Title=Size.
Add Directives...
ng-model=data.size
ng-options=size.id as size.desc for size in optionSizes
Edit JS Codes (Home Controller)
function ($scope, $stateParams) {
$scope.optionSizes=[
{id:1,desc:'small'},
{id:2,desc:'medium'},
{id:3,desc:'large'},
]
$scope.data={};
}
|
3. Toggle Component
Add Toggle Component.
Title=Extra Cheese
Add Directives…
ng-model=data.extracheese
4. List Divider and Radio Component
Add List Divider.
Content=Topping
Add First Radio Component
Title=Pepperoni
Add Directives…
ng-model=data.topping
ng-value='pepperoni'
Add Second Radio Component
Title=Sausage
Add Directives…
ng-model=data.topping
ng-value='sausage'
5. Input Component
Add Input Component.
Title=Note
Add Directive…
ng-model=data.note
6. Paragraph Component
Add Paragraph Component.
Content={{data}}
7. Run
8. Passing Data As String Parameter
Home Page
Add Button Component…
Title=Confirm
Add Directive…
ng-click=confirmOrder()
Edit JS Code (Home Controller)
function ($scope, $stateParams,$state) {
$scope.optionSizes=[
{id:1,desc:'small'},
{id:2,desc:'medium'},
{id:3,desc:'large'},
]
$scope.data={};
$scope.confirmOrder=function(){
var strData= angular.toJson($scope.data);
$state.go('confirm',{paramorder:strData});
}
}
|
Confirm Page
Add Paragraph Component.
In the Properties Panel…
Add Route Parameters…
paramorder=none
Edit JS Code (Confirm Controller)
function ($scope, $stateParams) {
$scope.data=$stateParams.paramorder;
alert($stateParams.paramorder);
}
|
GITHUB:
PLUNKER:
.
No comments:
Post a Comment