diff options
author | 2017-09-28 14:31:07 -0400 | |
---|---|---|
committer | 2017-09-28 14:34:01 -0400 | |
commit | a3b65e405278eb4b54de869a19b66ed9338dd1a6 (patch) | |
tree | 51b694ca9e585bcd76cf6c39ea95974a949d8beb /docs/tutorials/portal-sdk/dynamic-content.rst | |
parent | 51d83152697da4f2ef2242471ee43f36e6b64300 (diff) |
Added tutorial for portal-sdk apps
Added a tutorial for how to create a basic app
using the portal sdk.
Change-Id: I52783748760501e57751e19d1eb586d21cbef0d9
Issue-Id: PORTAL-100
Signed-off-by: jsseidel <jsseidel@fastmail.com>
Diffstat (limited to 'docs/tutorials/portal-sdk/dynamic-content.rst')
-rw-r--r-- | docs/tutorials/portal-sdk/dynamic-content.rst | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/docs/tutorials/portal-sdk/dynamic-content.rst b/docs/tutorials/portal-sdk/dynamic-content.rst new file mode 100644 index 00000000..aa8c067a --- /dev/null +++ b/docs/tutorials/portal-sdk/dynamic-content.rst @@ -0,0 +1,30 @@ +Dynamic content +=============== + +Now, we'll make our new application dynamic by allowing user interaction. To do this, we'll let the user select between "download" and "upload" charts with an HTML select/option menu. + +Creating the Angularized select/option menu +------------------------------------------- + +Add the following just above our Google Chart placeholder in :code:`sdk/ecomp-sdk/epsdk-app-os/src/main/webapp/app/fusion/scripts/myapp/myfirstpage/template.html`: + +.. code-block:: html + + <select ng-model="state.direction" ng-change="getChartData(state.direction)" ng-options="direction for direction in ['download', 'upload']"></select> + +The :code:`state.direction` value for the :code:`ng-model` attribute tells AngularJS that the :code:`state.direction` should hold the current value of the selected option. We saw it earlier in our controller: + +.. code-block:: javascript + + $scope.state = { + . + . + // Holds the selected direction from the select/options control + direction: "download" + . + . + }; + +How this works is simple. Using the options defined in :code:`ng-options`, AngularJS creates a select/option button. When the user selects an option, the value is stored in :code:`ng-model`. If the option changes, AngularJS calls our :code:`getChartData` function with the selected option as an argument. + +Compile, install, and try it out. |