AngularJS Live Example

by John-Philip Johansson

HTML

<div ng:app>
    <strong>Demonstrating why you should have a 'dot' on your scope</strong>
 <form name="myForm" ng-controller="Ctrl">
   <table>
     <tr>
                <td>{{item.id}}</td>
       <td>{{item.currentAssignment}}</td>
       <td>
           <input type="radio" ng-model="item.currentAssignment" ng-value="true" />
       </td>
       <td>
           <input type="radio" ng-model="item.currentAssignment" ng-value="false" />
       </td>                  

       </tr>
     <tr ng:repeat="item in listItems">
       <td>{{item.id}}</td>
       <td>{{item.currentAssignment}}</td>
       <td>
           <input type="radio" ng:model="item.currentAssignment" ng-value="true" />
       </td>
       <td>
           <input type="radio" ng:model="item.currentAssignment" ng-value="false" />
       </td>                  
     </tr>
   </table>   
  </form>
</div>

CSS

.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }

JavaScript

function Ctrl($scope) {
  $scope.item = {currentAssignment: true, id: 'aaa'};
  $scope.listItems = [
      {currentAssignment: true, id: 'aaa'},
      {currentAssignment: false, id: 'bbb'},
      {currentAssignment: true, id: 'ccc'},
  ];
}