背景：H5页采用formly-form组件，JS定义数据绑定，某元素需要定制输入样式，比如说范围输入
上菜：
一、H5页面
<!DOCTYPE html>
<html ng-app="indexApp">
<head>
<meta charset="UTF-8">
<title>webapp</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<!-- 这里采用了controller as语法 -->
<div ng-controller ="appCtrl as vm">
<form ng-submit="vm.onSubmit()">
<formly-form model="vm.user" fields="vm.userFields">
<button type="submit">Submit</button>
</formly-form>
</form>
<pre>
{{vm.user}}
</pre>
</div>
<!-- formly 必备组件 -->
<script src="bower_components/api-check/dist/api-check.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-formly/dist/formly.js"></script>
<script src="bower_components/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.js"></script>
<!-- 引入区域框 -->
<script src="comp/rangeInput.js"></script>
<script src="demo_formly.js"></script>
</body>
</html>
二、demo_formly.js
var module = angular.module('indexApp',
[
'formly',
'formlyBootstrap',
'rangeinput'
]
);
module.controller('appCtrl', function ($scope) {
var vm = this; // vm stands for "View Model" --> see https://github.com/johnpapa/angular-styleguide#controlleras-with-vm
vm.user = {
username:"pet",
password:"12345",
};
vm.userFields = [
{
// the key to be used in the model values
// so this will be bound to vm.user.username
key: 'username',
type: 'input',
templateOptions: {
label: 'Username',
placeholder: 'johndoe',
required: true,
description: 'Descriptive text'
}
},
{
key: 'password',
type: 'input',
templateOptions: {
type: 'password',
label: 'Password',
required: true
},
expressionProperties: {
'templateOptions.disabled': '!model.username' // disabled when username is blank
}
},
{
key:'pay_cnt_30',
//注意这里ng-model绑定属性的写法
template: '<span>30天支付订单</span><range-input ng-model="model[options.key]"></range-input>'
}
];
vm.onSubmit = onSubmit;
function onSubmit() {
console.log('form submitted:', vm.user);
}
<!-- 也可以直接在$scope上定义方法,html上调用时,直接用onSubmit()即可 -->
$scope.onSubmit = function () {
console.log('form submitted:', vm.user);
}
console.log(vm);
console.log($scope);
});
三、pay_cnt_30属性采用自定义H5模板，内含定制directive
angular.module('rangeinput',[])
.directive('rangeInput',function () {
return{
restrict : 'E',
templateUrl : 'comp/rangeInput.html',
scope:{
rangeValue : '=ngModel' //注意这里将rangeValue绑定到attr上名为ngModel的属性
},
link:function (scope,element,attrs) {
scope.range = {
min: 0,
max: null
};
//观察的也是绑定的attr属性名，要带引号
attrs.$observe('ngModel', function (value) {
if (scope.rangeValue != null) {
var target = scope.rangeValue.split(",");
scope.min = target[0];
scope.max = target[1];
}
});
//$watch的对象为scope上的对象，且要带引号
scope.$watch('range',function(newValue,oldValue) {
var min = scope.range.min==null? "0" : scope.range.min;
var max = scope.range.max==null? "*" : scope.range.max;
if(max!="*" && min > max){
scope.range.min = max;
}
scope.rangeValue = min+","+max;
},true);
}
}
});
四、directive的H5模板
<div style="display: inline">
<input ng-model="range.min" type="number">
</div>
<div style="display: inline">
<span>-</span>
</div>
<div style="display: inline">
<input type="number" ng-model="range.max">
</div>
分享到：
相关推荐
1. **Angular-Formly 基础**：Angular-Formly 包括一个服务（`formly`）和一组指令（如 `formly-form` 和 `formly-field`），这些组件协同工作，根据配置的 JSON 数据生成表单。JSON 数据定义了表单字段的类型、属性...
为了更好地进行AngularJS开发，有一些工具和插件可以帮助进行表单验证，例如AngularJS的UI库（如Angular-UI Bootstrap）提供了许多预定义的表单组件，AngularJS Formly提供了一种更灵活的方式来自定义和验证表单。...
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
ACM动态规划模板-区间修改线段树问题模板
# 踏入C语言的奇妙编程世界 在编程的广阔宇宙中，C语言宛如一颗璀璨恒星，以其独特魅力与强大功能，始终占据着不可替代的地位。无论你是编程小白，还是有一定基础想进一步提升的开发者，C语言都值得深入探索。 C语言的高效性与可移植性令人瞩目。它能直接操控硬件，执行速度快，是系统软件、嵌入式开发的首选。同时，代码可在不同操作系统和硬件平台间轻松移植，极大节省开发成本。 学习C语言，能让你深入理解计算机底层原理，培养逻辑思维和问题解决能力。掌握C语言后，再学习其他编程语言也会事半功倍。 现在，让我们一起开启C语言学习之旅。这里有丰富教程、实用案例、详细代码解析，助你逐步掌握C语言核心知识和编程技巧。别再犹豫，加入我们，在C语言的海洋中尽情遨游，挖掘无限可能，为未来的编程之路打下坚实基础！
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
本项目为Python语言开发的PersonRelationKnowledgeGraph设计源码，总计包含49个文件，涵盖19个.pyc字节码文件、12个.py源代码文件、8个.txt文本文件、3个.xml配置文件、3个.png图片文件、2个.md标记文件、1个.iml项目配置文件、1个.cfg配置文件。该源码库旨在构建一个用于表示和查询人物关系的知识图谱系统。
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
rtsp实时预览接口URL:/evo-apigw/admin/API/MTS/Video/StartVideo HLS、FLV、RTMP实时预览接口方式 :接口URL/evo-apigw/admin/API/video/stream/realtime 参数名 必选 类型 说明 data true string Json串 +channelId true string 视频通道编码 +streamType true string 码流类型：1=主码流, 2=辅码流，3=辅码流2 +type true string 协议类型：hls,hlss,flv,flvs,ws_flv,wss_flv,rtmp hls:http协议，m3u8格式，端口7086; hlss:https协议，m3u8格式，端口是7096; flv:http协议，flv格式,端口7886; flvs:https协议，flv格式,端口是7896; ws_flv:ws协议，flv格式,端口是7886; wss_flv:wss协议，flv格式,端口是7896; rtmp:rtmp协议,端口是1975;
Simulink永磁风机飞轮储能系统二次调频技术研究：频率特性分析与参数优化,Simulink永磁风机飞轮储能二次调频技术：系统频率特性详解及参数优化研究参考详实文献及两区域系统应用,simulink永磁风机飞轮储能二次调频，系统频率特性如下，可改变调频参数改善频率。 参考文献详细，两区域系统二次调频。 ,核心关键词： 1. Simulink 2. 永磁风机 3. 飞轮储能 4. 二次调频 5. 系统频率特性 6. 调频参数 7. 改善频率 8. 参考文献 9. 两区域系统 以上关键词用分号（;）分隔，结果为：Simulink;永磁风机;飞轮储能;二次调频;系统频率特性;调频参数;改善频率;参考文献;两区域系统。,基于Simulink的永磁风机与飞轮储能系统二次调频研究：频率特性及调频参数优化
MATLAB驱动的ASR防滑转模型：PID与对照控制算法对比，冰雪路面条件下滑移率与车速轮速对照展示,MATLAB驱动的ASR防滑转模型：PID与对照控制算法对比，冰雪路面条件下滑移率与车速轮速对照图展示,MATLAB驱动防滑转模型ASR模型 ASR模型驱动防滑转模型 ?牵引力控制系统模型 选择PID控制算法以及对照控制算法，共两种控制算法，可进行选择。 选择冰路面以及雪路面，共两种路面条件，可进行选择。 控制目标为滑移率0.2，出图显示车速以及轮速对照，出图显示车辆轮胎滑移率。 模型简单，仅供参考。 ,MATLAB; ASR模型; 防滑转模型; 牵引力控制系统模型; PID控制算法; 对照控制算法; 冰路面; 雪路面; 控制目标; 滑移率; 车速; 轮速。,MATLAB驱动的ASR模型：PID与对照算法在冰雪路面的滑移率控制研究
芯片失效分析方法介绍 -深入解析芯片故障原因及预防措施.pptx
4131_127989170.html
内容概要：本文提供了一个全面的PostgreSQL自动化部署解决方案，涵盖智能环境适应、多平台支持、内存与性能优化以及安全性加强等重要方面。首先介绍了脚本的功能及其调用方法，随后详细阐述了操作系统和依赖软件包的准备过程、配置项的自动生成机制，还包括对实例的安全性和监控功能的强化措施。部署指南给出了具体的命令操作指导，便于新手理解和执行。最后强调了该工具对于不同硬件条件和服务需求的有效应对能力，特别是针对云计算环境下应用的支持特点。 适合人群：对PostgreSQL集群运维有一定基础并渴望提高效率和安全性的数据库管理员及工程师。 使用场景及目标：本脚本能够帮助企业在大规模部署时减少人工介入时间，确保系统的稳定性与高性能，适用于各类需要稳定可靠的数据库解决方案的企业或机构，特别是在大数据量和高并发事务处理场合。 其他说明：文中还提及了一些高级功能如自动备份、流复制等设置步骤，使得该方案不仅可以快速上线而且能满足后续维护和发展阶段的要求。同时提到的技术性能数据也为用户评估其能否满足业务需求提供了直观参考。
房地产开发合同[示范文本].doc
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
工程技术承包合同[示范文本].doc
蓝桥杯开发赛【作品源码】