Angular Radio Options

Angular Radio Options

by Andrew Pougher

HTML

<div ng-app="app">
  <div ng-controller="mainController">
    <label ng-repeat="option in options">
      <input type="radio" ng-model="$parent.selected" ng-value="option.cost" />{{option.service}}
    </label>
    {{selected}}
    <input type="text" ng-model="selected">
  </div>
</div>

<script>
  /* http://bit.ly/ARP71 */
  (function(i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function() {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o),
      m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');

</script>

JavaScript

var appModule = angular.module('app', []);

appModule.controller('mainController', function($scope) {

  $scope.selected = '12.40';

  $scope.options = [{
    "service": "UPS Ground",
    "cost": "12.40"
  }, {
    "service": "UPS Three-Day Select",
    "cost": "17.34"
  }, {
    "service": "UPS Second Day Air",
    "cost": "22.60"
  }, {
    "service": "UPS Second Day Air A.M",
    "cost": "25.98"
  }, {
    "service": "UPS Next Day Air Saver",
    "cost": "47.25"
  }, {
    "service": "UPS Next Day Air",
    "cost": "55.63"
  }, {
    "service": "UPS Next Day Air Early A.M",
    "cost": "94.25"
  }];

});