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)
