Angular images. Choose image set using data from radio button selection.
| <!-- initializing Angular --> | |
| <html ng-app> | |
| <head> | |
| <!-- setting default value --> | |
| <script language="javascript"> | |
| function Ctrl($scope) { | |
| $scope.graph = 'noise_margin'; | |
| } | |
| </script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> | |
| </head> | |
| <!-- all code evolves Angular should be wrapped inside some container with ng-controller --> | |
| <body ng-controller="Ctrl"> | |
| <!-- selecting value, binding data to 'graph' model --> | |
| <form name="graphForm"> | |
| <input type="radio" ng-model="graph" value="noise_margin"> noise_margin | |
| <input type="radio" ng-model="graph" value="speed"> speed | |
| <input type="radio" ng-model="graph" value="attenuation"> attenuation | |
| </form> | |
| <!-- using selected value to display image via 'ng-src' with 'graph' model --> | |
| <img ng-src="http://rrd-graph.example.com/{{graph}}/graph_day.png"><br><br> | |
| <img ng-src="http://rrd-graph.example.com/{{graph}}/graph_week.png"><br><br> | |
| <img ng-src="http://rrd-graph.example.com/{{graph}}/graph_month.png"><br><br> | |
| <img ng-src="http://rrd-graph.example.com/{{graph}}/graph_year.png"> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment