docs/tutorials/portal-sdk/dynamic-content.rst

   1 Dynamic content
   2 ===============
   3
   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.