Radio with ng-repeat

by hishamabdelhafez

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<!-- 
1- Switch background color based on the selected radio 
2- Show/hide a div based on the selected radio -->

<div ng-controller="MyCtrl">
  <label ng-repeat="type in types" ng-class="{selectedlabel: $parent.selected == type.id}">
    <input type="radio" ng-model="$parent.selected" name="Group" ng-value="type.id"> {{type.name }}
    <br>
  </label>
  Current selecetd: {{selected}}

  <div ng-show="selected == 1">
    I am div 1!
    <input type="text">
  </div>
  <div ng-show="selected == 2">
    and I am div 2!
    <input type="text">
  </div>
  <div ng-show="selected == 3">
    and I am the lovely div 3!
    <input type="text">
  </div>


</div>

CSS

.selectedlabel {
  background-color: red;
}

JavaScript

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

function MyCtrl($scope) {

  $scope.selected = 1;
  $scope.types = [{
    id: 1,
    name: "first"
  }, {
    id: 2,
    name: "second"
  }, {
    id: 3,
    name: "third"
  }];
}