Angular: Radio inputs

by cambiata

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/232/artifact/build/pkg/0.10.7-64912069/angular-0.10.7-64912069.js"></script>
<form name="form">
  <h3>Color (init to red)</h3>
  <input type="radio" ng:model="color" value="red" />
  <input type="radio" ng:model="color" value="blue" />
  <input type="radio" ng:model="color" value="white" />
  {{color}}
  set to <a ng:click="color='red'">red</a> <a ng:click="color=null">null</a> <a ng:click="color=''">empty string</a> <a ng:click="color=undefined">undefined</a>
  <br />

  <h3>Color (required)</h3>
  <input type="radio" ng:model="color2" name="alias" value="red" required />
  <input type="radio" ng:model="color2" name="alias" value="blue" />
  <input type="radio" ng:model="color2" name="alias" value="white" />
  {{color2}}
  set to <a ng:click="color2='red'">red</a> <a ng:click="color2=null">null</a> <a ng:click="color2=''">empty string</a> <a ng:click="color2=undefined">undefined</a>

  <h3>Boolean</h3>
  <input type="radio" ng:model="value" name="alias" boolean-value="true" /> true
  <input type="radio" ng:model="value" name="alias" boolean-value="false" /> false
  <input type="checkbox" ng:model="value" />
  value = {{value | typeOf}}
  <a ng:click="value=true">set to true</a>

  <h3>Number</h3>
  <input type="radio" ng:model="value2" value="1" number-value /> 1
  <input type="radio" ng:model="value2" value="2" number-value /> 2
  <input type="radio" ng:model="value2" value="3" number-value /> 3
  <input type="radio" ng:model="value2" value="4" number-value /> 4
  <input type="radio" ng:model="value2" value="5" number-value /> 5
  value2 = {{value2 | typeOf}}
  <a ng:click="value2=3">set to 3</a>

  <h3>Ng:repeat with numbers</h3>
  <span ng:repeat="(i, item) in items">
    ID: {{i}}
    <input type="text" ng:model="item.name" />
    <input type="text" ng:model="item.email" /><br />
  </span>
  <button ng:click="items.push({})">ADD</button><br />

  <input ng:repeat="(i, item) in items"...

CSS

.ng-invalid {
    border-color: red;
}

.ng-valid {
    border-color: green;
}

.ng-dirty {
    border-style: solid;
    border-width: 2px;
}

.ng-pristine {
    border-style: solid;
    border-width: 1px;
}

.errors {
    color: red;
}

JavaScript

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

function Main($scope) {
  $scope.typeOf = function(value) {
    return typeof value;
  };

  $scope.color = 'red';

  $scope.items = [{
    name: 'Zero',
    email: '[email protected]'
  }, {
    name: 'One',
    email: '[email protected]'
  }, {
    name: 'Two',
    email: '[email protected]'
  }, {
    name: 'Three',
    email: '[email protected]'
  }];
}

myApp.directive('booleanValue', function() {
  return function(scope, elm, attr) {
    attr.$set('value', attr.booleanValue === 'true');
  };
});

// this allows binding to
myApp.directive('numberValue', function() {
  return function(scope, elm, attr) {
    scope.$watch(function() {
      return attr.value;
    }, function() {
      attr.$set('value', parseFloat(attr.value));
    });
  };
});

myApp.filter('typeOf', function() {
  return function(value) {
    var type = typeof value;
    return type !== 'undefined' ? value + ' (' + type + ')' : '';
  };
});