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>
  <meta charset="utf-8">
  <title>Angular JS</title>
</head>
<body ng-app="jsbin">
  <div ng-controller="DemoCtrl">
    
    <ul>
      <li ng-repeat="reportTopLevelReason in reportTopLevelReasons">
        <label><input type="radio" name="topLevelReason" value="{{reportTopLevelReason.title}}" ng-model="choosenTopLevelReason"> {{reportTopLevelReason.title}}</label>
        <ul ng-show="choosenTopLevelReason == reportTopLevelReason.title">
          <li ng-repeat="subReason in reportTopLevelReason.subReasons">
            <label>
              <input type="checkbox" ng-model="subReason.on" ng-checked="subReason.on">
              {{subReason.title}}
            </label>
          </li>
        </ul>
      </li>
    </ul>
    
    
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
</body>
</html>
 
var app = angular.module('jsbin', []);
​
app.controller('DemoCtrl', function($scope) {
  $scope.choosenTopLevelReason = false;
    $scope.reportTopLevelReasons = [{
        title: "I do not think this should be on this site.",
        on: false,
        subReasons:[{
            title: "It is pornography",
            on: false
        },{
            title: "It is distasteful",
            on: false
        },{
            title: "It goes against my views",
            on: false
        },{
            title: "It advocates violence or harm towards a person or animal",
            on: false
        },{
            title: "It is spam",
            on: false
        }]
    },{
        title: "This does not interest me",
        on: false,
        subReasons:[{
            title: "Hide this",
            on: false
        }]
    }];
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers