Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="Controller1">
  <ul>
    <li ng-repeat="car in cars">
      {{ car.name }}
      <input type="number" ng-model="car.cost">
    </li>
  </ul>
  <p>{{ collection.totalCost() | currency }}</p>
</body>
</html>
 
var data = [
  { id: 1, name: 'Honda', cost: 10 },
  { id: 2, name: 'Toyota', cost: 20 },
  { id: 3, name: 'Ford', cost: 40 }
];
var CarCollection = Backbone.Collection.extend({
  totalCost: function() {
    var total = 0;
    
    this.forEach(function(model) {
      total += model.get('cost');
    });
    
    return total;
  }
});
function Controller1($scope) {
  var collection = new CarCollection(data);
  
  $scope.cars = collection.toJSON();
  $scope.collection = collection;
}
Output

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

Dismiss x
public
Bin info
skaterdav85pro
0viewers