角度架构表单 - 如何创建“总计”字段

时间:2015-03-13 06:37:15

标签: angular-schema-form

有没有办法在角度架构表单中创建一个能够对表单上的其他字段求和的自定义字段类型?我查看了指令/装饰器,但不确定如何引用要求求的字段?

1 个答案:

答案 0 :(得分:3)

最简单的方法可能是让用户提供您想要总结的字段的键,并注意$watchGroup的更改

这是表单定义的外观示例:

{
  type: "sum",
  sumFields: [
    "key.to.field1",
    "key.to.field2",
    "key.to.field3"
  ]
}

然后你需要在你的字段类型sum中有一个指令来实际总结。 (警告,未经测试的代码)

<div class="form-control-group"> 
  <input disabled sum-it-up="form.sumFields" type="text">
</div>


angular.module('myModule').directive('sumItUp',function(){
  return {
    scope: true,
    link: function(scope, element, attr) {
      var keys = scope.$eval(attrs.sumItUp);.map(function(key){
         // Whatever you put in model is always available on scope
         // as model. Skipped ObjectPath for simplification.
         return 'model.'+key 
      }) 
      scope.$watchGroup(keys, function(values) {
        element.value(values.reduce(function(sum, value){ 
          return sum+value
        },0))
      })
    }
  }
})

您还可以执行字段集类型的事物并循环遍历表单的items属性中的每个项目并从那里开始。 sfSelect服务也可能有用。希望有所帮助!