| jsseidel | a3b65e4 | 2017-09-28 14:31:07 -0400 | [diff] [blame] | 1 | Dynamic content |
| 2 | =============== |
| Christopher Lott (cl778h) | 881d219 | 2017-11-06 15:13:17 -0500 | [diff] [blame] | 3 | |
| jsseidel | a3b65e4 | 2017-09-28 14:31:07 -0400 | [diff] [blame] | 4 | 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. |
| 5 | |
| 6 | Creating the Angularized select/option menu |
| 7 | ------------------------------------------- |
| 8 | |
| 9 | 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`: |
| 10 | |
| 11 | .. code-block:: html |
| 12 | |
| 13 | <select ng-model="state.direction" ng-change="getChartData(state.direction)" ng-options="direction for direction in ['download', 'upload']"></select> |
| 14 | |
| 15 | 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: |
| 16 | |
| 17 | .. code-block:: javascript |
| 18 | |
| 19 | $scope.state = { |
| 20 | . |
| 21 | . |
| 22 | // Holds the selected direction from the select/options control |
| 23 | direction: "download" |
| 24 | . |
| 25 | . |
| 26 | }; |
| 27 | |
| 28 | 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. |
| 29 | |
| 30 | Compile, install, and try it out. |