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>
  
  <!-- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
  
  <script src="//cdnjs.cloudflare.com/ajax/libs/Faker/0.7.2/MinFaker.js"></script>
  
  <script src="//rawgit.com/kentcdodds/ng-stats/master/ng-stats.js"></script>
  <title>What's new in Angular 1.3</title>
</head>
<body ng-app="app" ng-controller="MainCtrl as vm">
  <h1>Angular {{vm.angularVersion}}</h1>
  <h2>
    One-time bindings
    <small>by <a href="http://twitter.com/kentcdodds">@kentcdodds</a></small>
  </h2>
  <div angular-stats
       watch-count=".watch-count">
    Watch Count: <span class="watch-count"></span>
  </div>
  <hr />
  
  <h2>Demo</h2>
  
  <div>
    <h3>ng-repeat example</h3>
    <label>
      Total People:
      <input type="number" min="0" max="100" ng-model="vm.visiblePeople"/>
    </label>
    <div ng-repeat="person in vm.people | limitTo:vm.visiblePeople">
      <div class="person-card">
        <div class="person-avatar-container">
          <img ng-src="{{::person.picture}}" class="img-circle img-thumbnail" ng-click="vm.increment(person, 'clicked')">
          <div class="margin-vertical-small">
            <small>You've clicked {{::person.name}} {{person.clicked || 0}} times</small>
          </div>
        </div>
        <div>
          <strong>Name:</strong> {{::person.name}}
        </div>
        <div>
          <strong>Username:</strong> {{::person.username}}
        </div>
        <div>
          <strong>Email:</strong> <a ng-href="mailto:{{::person.email}}">{{::person.email}}</a>
        </div>
        <div>
          <strong>Address:</strong> <a ng-href="http://maps.google.com/?q={{::person.address.geo.lat}},{{::person.address.geo.lng}}">Map</a>
          <div>
            {{::person.address.streetC}}, {{::person.address.city}}<br />
            {{::person.address.ukCounty}}, {{::person.address.ukCountry}} {{::person.address.zipcode}}
          </div>
        </div>
        <div>
          <strong>Phone:</strong> <a ng-href="tel:{{::person.phone}}">{{::person.phone}}</a>
        </div>
        <div>
          <strong>Website:</strong> <a ng-href="http://{{::person.website}}">{{::person.website}}</a>
        </div>
        <div>
          <strong>Company:</strong> {{::person.company.name}} - {{::person.company.catchPhrase}}
        </div>
      </div>
    </div>
  </div>
  
  <div>
    <h3>Input Example</h3>
    <label>
      Some input:
      <input ng-model="vm.inputValue" />
    </label>
    <br />
    Bound value: {{::vm.inputValue}}
  </div>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
kentcdoddspro
0viewers