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="studentApp">
<head>
<meta name="description" content="Camp NG Example 2" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  <script src="http://code.angularjs.org/1.2.12/angular-route.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="StudentCtrl as studentList">
  <ul>
    <li ng-repeat="student in studentList.students"><a href="#/students/{{student.id}}">{{student.name}}</a></li>
  </ul>
  <ng-view></ng-view>
</body>
  <script id="showStudent.html" type="text/ng-template">
    <dl>
      <dt>{{student.name}}</dt>
      <dd ng-show="student.email"><img ng-src="http://avatars.io/email/{{student.email}}" /></dd>
    </dl>
    <a href="#/students/{{student.id}}/edit">Edit<a>
  </script>
  <script id="editStudent.html" type="text/ng-template">
  <form name="studentForm" class="form-vertical" novalidate="true">
    <div class="control-group" ng-class="{error: studentForm.name.$invalid}">
      <label for="name" class="control-label">Name</label>
      <input name="name" ng-model="student.name" type="text" ng-required="true" ng-pattern="/^[A-Z].*/">
      <span class="inline-help text-error" ng-show="studentForm.name.$error.required">You need a name!</span>
      <span class="inline-help text-error" ng-show="studentForm.name.$error.pattern">Name must be capitalized</span>
    </div>
    <div class="control-group">
      <label for="email" class="control-label">Email</label>
      <input name="email" type="text" ng-model="student.email"  />
    </div>
    <div class="form-actions">
      <input type="submit" class="btn primary" value="Save" ng-click="saveStudent()">
      <input type="button" class="btn" value="Cancel">
    </div>
  </form>
  </script>
​
</body>
</html>
 
​
 
var studentApp = angular.module("studentApp", ["ngRoute"]);
​
studentApp.factory("Student", function() {
  return {
    students: [{
      id: 1,
      name: "Joe Blow",
      email: "chris@gaslight.co"
    }, {
      id: 2,
      name: "John Doe",
      email: ""
    }],
    
    getStudent: function(id) {
      return _.findWhere(this.students, {id: Number(id)});
    }
  };
});
​
studentApp.controller("StudentCtrl", function(Student) {
  this.students = Student.students
});
​
studentApp.controller("ShowStudentCtrl", function($scope, Student, $routeParams) {
  $scope.student = Student.getStudent($routeParams.id);
});
​
studentApp.controller("EditStudentCtrl", function($scope, Student, $routeParams, $location) {
  $scope.student = Student.getStudent($routeParams.id);
  $scope.saveStudent = function() {
    $location.path("/students/" + this.student.id);
  }
});
​
studentApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/students/:id/edit', {templateUrl: 'editStudent.html', controller: "EditStudentCtrl"}).
      when('/students/:id', {templateUrl: 'showStudent.html', controller: "ShowStudentCtrl"});
  }]);
Output

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

Dismiss x
public
Bin info
gaslightpro
0viewers