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="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="app" ng-controller="DemoController">
  
<p><span>Sort: </span><a href="" ng-click="changeSort()">{{sort}}</a></p>
  
<p ng-repeat="field in fields | orderBy:sort" ng-switch on="field.type">
  <span>{{field.name}}:</span>
  <select ng-switch-when="select">
    <option ng-repeat="select in field.select">{{select}}</option>
  </select>
  <textarea ng-switch-when="textarea"></textarea>
  <input ng-switch-when="input"></input>  
</p>
​
  {{12+12}}
  
</body>
</html>
 
angular.module('app', [])
​
  .factory('Calc', function($timeout) {
    var getFields = function(callback) {
      $timeout(function() {
        callback([
          {name: "field1", type: "select", select: [10, 20, 30, 40]},
          {name: "field2", type: "input"},
          {name: "field3", type: "textarea"},
          {name: "field4", type: "select", select: ["one", "two", "three", "four"]}
        ]);
      }, 1000);
    };
    return {
      getFields: getFields
    };
  })
​
  .controller('DemoController', function ($scope, Calc) {
    Calc.getFields(function(calcFields) { 
      $scope.fields = calcFields;
    });
​
    $scope.sort = "name";
    $scope.changeSort = function() {
      if ($scope.sort !== "name") {
        $scope.sort = "name";
      } else {
        $scope.sort = "type";
      }
    };
  });
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers