Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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">
  <div calc-drct></div>
  {{12+12}}
  
</body>
</html>
 
angular.module('app', [])
  .factory('Calc', function($timeout) {
    var getFields = function(callback) {
      $timeout(function() {
        callback([
          {name: "field1", select: [10, 20, 30, 40]},
          {name: "field2"},
          {name: "field3", textarea: true},
          {name: "field4", select: ["one", "two", "three", "four"]}
        ]);
      }, 5000);
    };
    return {
      getFields: getFields
    };
  })
  .controller('DemoController', function ($scope) {
    $scope.orders = {};
  })
  .directive('calcDrct', function ($compile, Calc) {
    return {
      restrict: 'A',
      link: function(scope, element) {
        
        Calc.getFields(function(calcFields) { 
          
          var html = "<form>";
          angular.forEach(calcFields, function(field){
            html += "<p>" + field.name + "</p>";
            if (field.select !== undefined) {
              html += "<select>";
              angular.forEach(field.select, function(selectdata) {
                html += "<option>" + selectdata + "</option>";
              }); 
              html += "</select>";
            } else if (field.textarea) {
              html += "<textarea></textarea>";
            } else {
              html += "<input></input>";
            } 
          });
          html += "</form>";
          element.append($compile(html)(scope));
        
        });
      }
    };
  });
Output 300px

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

Dismiss x
public
Bin info
Pofigizmpro
0viewers