Monday, March 12, 2018

103 Ionic Creator Form Data Order Your Pizza

103 Ionic Creator Form Data Order Your Pizza



.
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

order-your-pizza.gif

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;

visit link download
Posted by at

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)