Framework7 and IONIC video #2 T-shirt order

Framework7

Framework7 Github

IONIC video #2 T-shirt order on Laulima ITS381/resource/video
Passing data from one page to another page. Ionic use radial button list, spacer, order button will keep space between items.
Page1: Order Enter
Angularjs template tags with object model:  {{object.property of the object}} How controller knows {{data.size}} {{data.color}} {{data.note}} etc,

+ add options -> Angular directives
fill “ng-model”  -> fill “data.size”  -> go to CODE section at right bottom.

function($scope, stateParams) { //This is basically page controller
//$scope where all the data resides.
$scope.sizes [{“id”:”xsmall”, “label”:”X-Small”}{“id”:”small”, “label”:”Small”}{“id”:”midium”, “label”:”Medium”}{“id”:”large”, “label”:”Large”}] // here creating drop-down menu selection.
}

+add option
fill “ng-options” -> fill “size.id as size.labels for size in sizes” -> go to CODE section at right bottom.

+ add options -> Angular directives
fill “ng-model”  -> fill “data.graphic”
fill “ng-value”  -> fill “Blue”  -> go to CODE section at right bottom.
Do all for the radial button.

Size {{data.size}} Type {{data.graphic}} Note {{data.note}} Rush shipping {{data.rushshipping}}
Rush shipping toggle true/false

In CODE section, define/assign all default values
$scope.data = {‘size’: $scope.sizes[0].id, ‘graphic’:’blue’, ‘note’:”}

Page2: Order confirm
Create a new page “order confirm” and drag paragraph icon, orderdata
The key is function($scope, $stateParam){$scope.orderdata=’size’: ‘$stateParams.size’, ‘graphic’:$stateParam.graphic, ‘note’:$stateParam.note,’rushshippng’:$stateParam.rushshipping} which assign $stateParam to the array of varialbes in page2 which is orderdata.

{{orderdata.size}} can display the value.(object.property)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s