当前位置: 首页 > 工具软件 > Formly > 使用案例 >

【AngularJS系列】formly-form 定制输入栏

邵畅
2023-12-01
背景: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>
 类似资料: