Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container" ng-controller="myCtrl">
  <div>
          <table>
              <tr>
                  <th>add</th>
                  <th>edit</th>
                  <th>delete</th>
              </tr>
              <tr ng-repeat="category in categories">
                  <td><input id="{{category.id + '_add'}}" ng-model="selection_add[category.id]" type="text">{{category.name}}</td>
                  <td><input id="{{category.id + '_edit'}}" ng-model="selection_edit[category.id]" type="text">{{category.name}}</td>
                  <td><input id="{{category.id + '_delete'}}" ng-model="selection_delete[category.id]" type="text">{{category.name}}</td>
              </tr>
          </table>
        <h1>Add</h1>
        <input type="text" ng-model="selection_add">
        <h1>Edit</h1>
        {{selection_edit}}
        <h1>Delete</h1>
        {{selection_delete}}
      </div>
</div>
</body>
</html>
 
(function(){
  var app = angular.module("myApp",[]);
}());
(function(){
  var myCtrl = function($scope){
    $scope.selection_add = {};
    $scope.selection_edit = {};
    $scope.selection_delete ={};
    $scope.categories = [ 
        {"name": "Sport", "id": "50d5ad" } , 
        {"name": "General", "id": "687ffr" },
        {"name": "Activities", "id": "678ffb" },
        {"name": "Regards", "id": "678fff" },
        {"name": "Thanks", "id": "678fer" },
        {"name": "Goes", "id": "678fgf" },
        {"name": "Oppertnities", "id": "674ffr" },
        {"name": "Convince", "id": "654ffr" },
        {"name": "Mopols", "id": "623ffr" } 
    ];    
  };
  angular.module("myApp")
  .controller("myCtrl", myCtrl);
}());
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers