Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app='MyApp'>
  <div ng-controller='ParentController'>
    <div ng-repeat='item in items' ng-controller='ChildController'>
      <form name='item_{{$index}}_form' novalidate>
        <strong>Item #{{$index + 1}}</strong>
        <p>
          <label for='name'>Name</label><br/>
          <input type='text' ng-model='item.name' name='name' required />
        </p>
        <p>
          <label for='description'>Description</label><br/>
          <textarea name='description' ng-model='item.description' required></textarea>
        </p>
      </form>
      <hr/>
    </div>
  </div>
</body>
</html>
 
var app = angular.module('MyApp', []);
var secondsToWaitBeforeSave = 2;
app.controller('ParentController', function($scope) {
  $scope.items = [
    {name: 'Foo', description: 'Hello, World'},
    {name: 'Bar', description: 'Lorem ipsum'}
  ];
});
app.controller('ChildController', function($scope, $timeout) {
  var timeout = null;
  var saveUpdates = function() {
    if ($scope['item_' + $scope.$index + '_form'].$valid) {
      console.log("Saving updates to item #" + ($scope.$index + 1) + "...", $scope.item);
    } else {
      console.log("Tried to save updates to item #" + ($scope.$index + 1) + " but the form is invalid.");
    }
  };
  var debounceUpdate = function(newVal, oldVal) {
    if (newVal != oldVal) {
      if (timeout) {
        $timeout.cancel(timeout);
      }
      timeout = $timeout(saveUpdates, secondsToWaitBeforeSave * 1000);
    }
  };
  $scope.$watch('item.name', debounceUpdate);
  $scope.$watch('item.description', debounceUpdate);
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers