`
v7sky
  • 浏览: 75267 次
文章分类
社区版块
存档分类
最新评论

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

AngularJS 
阅读更多
背景：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>

0
顶
0
踩
分享到：
| 【AngularJS系列】基于angular-ui-select ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics