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 id="ng-app" ng-app="app">
​
<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.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" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
​
<body ng-controller="demoCtr as demo">
  <div ng-form="form" name="form" class="form-horizontal">
    <pre>{{form.age.$error | json}}</pre>
    <pre>data: {{demo.data |json }}</pre>
    <div ng-repeat="item in demo.fields">
      <div class="control-group">
        <label class="control-label">{{item.label }} : </label>
        <div class="controls">
          <input type="number"  dy-name="item.field" ng-model="demo.data[item.field]" min="10" max="500"/>
        </div>
      </div>
    </div>
  </div>
</body>
​
</html>
 
angular.module("app",[])
.controller("demoCtr",[function(){
  var vm = this;
  vm.data = {};
  
  vm.fields =[{
  "label": "age",
  "field": "age"
}, {
  "label": "hight",
  "field": "hight"
}];
  
  return vm;
​
}]).directive("dyName", [
    function() {
      return {
        require: "ngModel",
        link: function(scope, elm, iAttrs, ngModelCtr) {
 ngModelCtr.$name = scope.$eval(iAttrs.dyName);
          console.log(          ngModelCtr );
          var formController = elm.controller('form') || {
            $addControl: angular.noop
          };
          formController.$addControl(ngModelCtr);
        }
      };
    }
  ]);
Output

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

Dismiss x
public
Bin info
greengerongpro
0viewers