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

v7sky

浏览: 76521 次

最近访客更多访客>>

jacky_dai

wang_eye

you

lordlorry

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (33)

社区版块

存档分类

【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
踩

分享到：

【react系列】初识 | 【AngularJS系列】基于angular-ui-select ...

2016-06-10 23:35
浏览 2881
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客更多访客>>