Pelaksanaan sudut membentuk susun atur automatik

Contoh dalam artikel ini menerangkan kod terperinci untuk Angular untuk melaksanakan reka letak automatik bentuk, dan berkongsi dengan anda untuk rujukan anda Kandungan khusus adalah seperti berikut

Rendering:

Kod khusus:

1.formlayoutCtrl.js

'use strict';
sxlcApp.controller('formlayoutCtrl', ['$scope', '$filter', '$http', function($scope, $filter, $http){
 $scope.title = '表单布局中';
 $scope.dataParamsUrl = './php/formlayout.json';
 
 $scope.resetForm = function(num){
  console.log(num)
 }
}]);

Salin selepas log masuk

2. formlayout.html

<div class="container" ng-controller="formlayoutCtrl">
 <span>{{title}}</span>
 <form class="form-horizontal" style="width: 400px;" name="formlayout" w5c-form-validate="validateOptions" novalidate>
  <form-layout url="dataParamsUrl">
    
  </form-layout>
  <button type="submit" class="btn btn-sm btn-info">
   提交
  </button>
  <button type="reset" class="btn btn-sm btn-danger" ng-click="resetForm()">
   重置
  </button>
 </form>
</div>

Salin selepas log masuk

3. formlayout.html

<div class="container" ng-controller="formlayoutCtrl">
 <span>{{title}}</span>
 <form class="form-horizontal" style="width: 400px;" name="formlayout" w5c-form-validate="validateOptions" novalidate>
  <form-layout url="dataParamsUrl">
    
  </form-layout>
  <button type="submit" class="btn btn-sm btn-info">
   提交
  </button>
  <button type="reset" class="btn btn-sm btn-danger" ng-click="resetForm()">
   重置
  </button>
 </form>
</div>

Salin selepas log masuk

4. formlayoutdirective.js

'use strict';
angular.module('form.layout', [])
/**
 * 定义布局的服务
 * @method
 * @param {Object} ) this.defaultTemplate [布局的模板]
 * @return {[type]}  [description]
 */
.provider('formLayout', function(){
 // 定义布局构造函数 
 function FormLayoutFn(){
  /**
   * 定义表单元素的模板
   * @type {{text: string, radio: string, checkbox: string, remember: string, range: string, time: string, date: string, datetime: string, search: string, select: string}}
   */
  this.elementTemplate = {
    text : '\<div class="form-group">\
       <label></label>\
       <input type="text" class="form-control" />\
      </div>',
    password : '<div class="form-group">\
        <label></label>\
        <input type="password" class="form-control" />\
       </div>',
    radio : '\<div class="form-group">\
        <label></label>\
        <div id="radiolist"></div>\
       </div>',
    email : '\<div class="form-group">\
       <label></label>\
       <input type="email" class="form-control" />\
      </div>',
    tel : '\<div class="form-group">\
       <label></label>\
       <input type="tel" class="form-control" />\
      </div>',
    url : '\<div class="form-group">\
       <label></label>\
       <input type="url" class="form-control" />\
      </div>',
    number : '\<div class="form-group">\
       <label></label>\
       <input type="number" class="form-control" />\
      </div>',
    checkbox : '<div class="form-group">\
        <label></label>\
        <div id="checkboxlist"></div>\
        </div>',
    range : '<div class="form-group">\
        <label></label>\
        <input type="range"/>\
       </div>',
    time : '<div class="form-group">\
        <label></label>\
        <input type="time" class="form-control"/>\
       </div>',
    date : '<div class="form-group">\
        <label></label>\
        <input type="date" class="form-control"/>\
       </div>',
    datetime : '<div class="form-group">\
        <label></label>\
        <input type="datetime" class="form-control"/>\
       </div>',
    search : '<div class="form-group">\
        <label></label>\
        <input type="search" class="form-control"/>\
       </div>',
    select : '<div class="form-group">\
        <label></label>\
        <select class="form-control"></select>\
       </div>',
    textarea : '<div class="form-group">\
        <label></label>\
        <textarea class="form-control"></textarea>\
       <div>',
   };
  //默认的模板, 可以使用如下的方式使用默认的模板
  this.defaultTemplate = '<input>';
  this.radioTmpl = '<label class="radio-inline"><input type="radio">radiotitle</label>';
  this.checkboxTmpl = '<label class="checkbox-inline"><input type="checkbox">checkboxtitle</label>';
 }
 
 FormLayoutFn.prototype = {
  /**
   * 获取模板
   * @method getElementTemplate
   * @return {[type]}   [description]
   */
  getElementTemplate : function () {
   return this.elementTemplate;
  },
 
  /**
   * 配置布局元素的模板
   * @param configTemplate
   */
  setElementTemplate : function(configTemplate){
   this.elementTemplate = angular.extend(this.elementTemplate, configTemplate);
  },
 
  /**
   * 实现布局函数
   * @method layout
   * @param {[type]} eleObj  指令中的模板对象
   * @param {[type]} elementObj 表单布局元素对象
   * @return {[type]}   [description]
   */
  layout : function(eleObj, elementObj){
   var thiz = this;
   var elementTemplate = this.elementTemplate;
   var defaultTemplate = this.defaultTemplate;
   var radioTmpl = this.radioTmpl;
   var checkboxTmpl = this.checkboxTmpl;
 
   if (angular.isObject(eleObj) && angular.isObject(elementObj)) {
    angular.forEach(elementObj, function(elementObjIterm, elementObjKey){
     //console.log(elementObjIterm.attr.type);
     var type = $.trim(elementObjIterm.attr.type);
     var templateObj = angular.element(elementTemplate[type]);
     // console.log(templateObj.find('input'));
     switch(type){
      case 'textarea' :
       var fileld = templateObj.find('textarea');
       // var templateObj = angular.element(elementTemplate.textarea);
       break;
      case 'select' :
       var fileld = templateObj.find('select');
       // var templateObj = angular.element(elementTemplate.select);
       break;
      case 'button' :
       var fileld = templateObj.find('button');
       // var templateObj = angular.element(elementTemplate.button);
       break;
      case 'datepicker' :
       var fileld = templateObj.find('datepicker');
       // var templateObj = angular.element(elementTemplate.datepicker);
       break;
      case 'radio' :
       var fileld = templateObj.find('#radiolist');
       // var templateObj = angular.element(elementTemplate.datepicker);
       break;
      case 'checkbox' :
       var fileld = templateObj.find('#checkboxlist');
       // var templateObj = angular.element(elementTemplate.datepicker);
       break;
      default :
       var fileld = templateObj.find('input') ;
       break;
     }
     // 设置 label 的标签名字
     templateObj.find('label').html(elementObjIterm.labeltext);
 
     if ('select' == type) {
      var options = elementObjIterm.attr.option;
      angular.forEach(options, function(content, val){
       var option = angular.element('<option value="'+val+'">'+content+'</option>');
       fileld.append(option);
      });
     }else if('radio' == type){
      var options = elementObjIterm.attr.option;
      angular.forEach(options, function(content, val){
       var tmpl = radioTmpl.replace('radiotitle', content);
       var tmplObj = angular.element(tmpl);
       tmplObj.find('input').attr('value', val);
       fileld.append(tmplObj);
      });
      // console.log(templateObj.find('label'));
     }else if('checkbox' == type){
      var options = elementObjIterm.attr.option;
      angular.forEach(options, function(content, val){
       var tmpl = checkboxTmpl.replace('checkboxtitle', content);
       var tmplObj = angular.element(tmpl);
       tmplObj.find('input').attr('value', val);
       fileld.append(tmplObj);
      });
     }else{
      angular.forEach(elementObjIterm.attr, function(val, attrname){
       fileld.attr(attrname, val);
      })
     }
      
     eleObj.append(templateObj.append(fileld));
    });
 
    return eleObj;
   }else{
    throw '传入的参数不是对象';
   }
    
  }
 
 };
 // 实例布局化构造类
 var formLayout = new FormLayoutFn();
 
 this.$get = function () {
  return formLayout;
 };
 //配置布局元素的模板
 this.setElementTemplate = function (configTemplate) {
  if (!configTemplate) return ;
  formLayout.setElementTemplate(configTemplate);
 }
});
/**
 * 指令的实现
 * @method
 * @return {[type]}    [description]
 */
angular.module('form.layout')
 .directive('formLayout', ['$http', '$filter', 'formLayout',function($http, $filter, formLayout){
  return {
   restrict : 'AE',
   scope  : {
    url : "=",
    // fields : {}
   },
   replace : true,
   // templateUrl : './tmpl/formlayout.html',
   transclude : true,
   // require : '&#63;^formLayout',
   link : function(scope, elem, attrs){
    if(!scope.url){
     throw '请在指令参数url中传入获取数据的 url 的值';
    }
    $http.get(scope.url).success(function(successData, status, headers, config){
     if (!successData.code) {
      scope.fields = successData.data;
      processFormFilds(successData.data);
     }else{
      throw '获取表单数据失败';
     }
    })
 
    function processFormFilds(data){
     formLayout.layout(elem, data);
     // console.log(data);
    }
   }
  }
 }]);

Salin selepas log masuk

Di atas ialah kod terperinci untuk Angular melaksanakan reka letak automatik bentuk saya harap ia akan membantu pembelajaran semua orang.