【AngularJS系列】formly-form 定制输入栏
背景：H5页采用formly-form组件，JS定义数据绑定，某元素需要定制输入样式，比如说范围输入
上菜：
一、H5页面
二、demo_formly.js
三、pay_cnt_30属性采用自定义H5模板，内含定制directive
四、directive的H5模板
上菜：
一、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>