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 ng-app="app">
<head>
<meta name="description" content="Code-Camp-Final" />
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <!-- Firebase -->
  <script src="https://cdn.firebase.com/js/client/1.0.15/firebase.js"></script>
  <!-- AngularFire Library -->
  <script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>  
</head>
<body>
  <div ng-controller='WaitListController'>
    
    <form ng-submit="saveParty()" class="form-inline party-form" role="form">
      <div class="form-group">
        <label class="sr-only" for="partyName">Party name</label>
        <input ng-model="newParty.name" type="text" class="form-control" id="partyName" placeholder="Name">
      </div>
      <div class="form-group">
        <label class="sr-only" for="phoneNumber">Phone number</label>
        <input ng-model="newParty.phone" type="text" class="form-control" id="phoneNumber" placeholder="Phone">
      </div>
      <div class="form-group">
        <label class="sr-only" for="sizeOfParty">Size of party</label>
        <input ng-model="newParty.size" type="text" class="form-control" id="sizeOfParty" placeholder="Size of party">
      </div>
      <button type="submit" class="btn btn-primary">Add party</button>
    </form>
​
    <table class="table table-striped table-bordered">
      <thead>
      <tr>
        <th>Done?</th>
        <th>Info</th>
        <th>Notified?</th>
        <th>Actions</th>
      </tr>
      </thead>
      <tr ng-repeat="party in parties | orderByPriority">
        <td><input type="checkbox" ng-model="party.done" ng-change="parties.$save(party.$id)"></td>
        <td>
          <div><strong>{{ party.name }} ({{ party.size }} people)</strong></div>
          <div>{{ party.phone }}</div>
          <div>
            <!--TODO: Add date created.-->
          </div>
        </td>
        <td>
          <div>
            {{ party.notified }}
          </div>
        </td>
        <td>
          <button ng-click="sendTextMessage(party)" type="submit" class="btn btn-success">Send SMS</button>
          <button ng-click="parties.$remove(party.$id)" type="submit" class="btn btn-danger">Remove</button>
        </td>
      </tr>
    </table>    
  </div>
</body>
</html>
 
body {
    padding-top: 20px;
}
​
.party-form {
    margin-bottom: 20px;
}
​
​
 
// This is an abbreviated example from 
// angularcourse.com. Check out the site
// for the full course, which includes 
// detailed line-by-line explanations,
// sample code, and over 7 hrs of HD 
// high quality video.
​
// Module
app = angular.module('app', ['firebase']);
​
// Services
app.value('FIREBASE_MAIN_URL', '<your-firebase-url');
app.value('FIREBASE_SMS_URL', 'your-sms-url');
​
// Controllers
app.controller('WaitListController', function($scope, $firebase, FIREBASE_MAIN_URL, FIREBASE_SMS_URL) {  
  // Connect $scope.parties to live Firebase data
  var partiesRef = new Firebase(FIREBASE_MAIN_URL);
  $scope.parties = $firebase(partiesRef);
​
  // Object to store data from the waitlist form.
  $scope.newParty = {name: '', phone: '', size: '', done: false, notified: 'No'};
​
  // Function to save a new party to the waitlist.
  $scope.saveParty = function() {
    $scope.parties.$add($scope.newParty);
    $scope.newParty = {name: '', phone: '', size: '', done: false, notified: 'No'};
  };
​
  // Function to send a text message to a party.
  $scope.sendTextMessage = function(party) {
    var textMessageRef = new Firebase(FIREBASE_SMS_URL);
    var textMessages = $firebase(textMessageRef);
    var newTextMessage = {
      phoneNumber: party.phone,
      size: party.size,
      name: party.name
    };
    textMessages.$add(newTextMessage);
    party.notified = 'Yes';
    $scope.parties.$save(party.$id);
  };  
});
​
Output 300px

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

Dismiss x
public
Bin info
gordonmzhupro
0viewers