Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-app="app">
   <div ng-controller="ctrl" class="sm-box">
      <p>Please select a mode:
      <sm-radio model="mode" value="MODE1" label="One" ng-click='mode="MODE1"'></sm-radio>
      <sm-radio model="mode" value="MODE2" label="Two"></sm-radio>
      <sm-radio model="mode" value="MODE3" label="Three"></sm-radio></p>
      <p>Selected mode is: {{mode}}</p>
   </div>
</div>
</body>
</html>
 
var app = angular.module('app', []);
​
app.controller('ctrl', ['$scope', function( $scope ) {
   $scope.mode = 'MODE1';
}]);
​
app.directive('smRadio', function($compile) {
   return {
      restrict: 'E',
      scope: {
        model: '=',
        value: '@',
        label: '@'
      },
​
      template: '' +
        '<input type="radio" name="name" ng-model="model" value="value"' +
        ' ng-checked="model==value" ng-click="model=value">' +
        '<label ng-click="model=value">{{label}}</label>',
​
      compile: function(tElt) {
         tElt.addClass( 'sm-radio' );
      }
   };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sulcopro
0viewers