如何创建range绑定到一个ng-model并input使用filter(已完成)输出两个字段的指令。从本质上讲,我 从模型到输入 工作都有一个方向,而 从输入到模型却 没有另一方向。如何实现呢?
range
ng-model
input
filter
我有这个HTML:
<div tu-range ng-model="arbitraymodel" />
和一个模型:
var arbitrarymodel = "10/22";
边注; 我创建了一个过滤器来拆分这两个值: {{ feature.Value | split:\'/\':0}}
{{ feature.Value | split:\'/\':0}}
而这个指令:
.directive('tuRange', function($compile) { return { restrict: 'A', require: 'ngModel', scope: { feature: '=', tudisabled: '=', model: '=ngModel' // edited }, template: '<input type="text" '+ 'ng-value="{{ model | split:\'/\':0}}" />'+ // edited to 'model' '-<input type="text" '+ 'ng-value="{{ model | split:\'/\':1}}" />', // edited to 'model' link: function(scope, element, attributes, ngModel) { } }; })
正确的方法(IMO)是按照此处所述创建自定义控件。
作为练习,我在此提琴中实现了它:http : //jsfiddle.net/6cn7y/
该指令的代码是(您可能需要修改一些细节):
app.directive("range", function() { var ID=0; function constructRangeString(from, to) { var result; if( !from && !to ) { result = null; } else if( from ) { result = from + "/" + (to || ""); } else if( to ) { result = "/" + to; } return result; } return { require: "ngModel", restrict: "E", replace: true, scope: { name: "@" }, template: '<div ng-form="{{ subFormName }}">' + '<input type="text" ng-model="from" class="range-from" />' + '<input type="text" ng-model="to" class="range-to" />' + '</div>', link: function(scope,elem,attrs,ngModel) { var re = /([0-9]+)\/([0-9]+)/; if( scope.name ) { scope.subFormName = scope.name; } else { scope.subFormName = "_range" + ID; ID++; } ngModel.$render = function() { var result, from, to; result = re.exec(ngModel.$viewValue); if( result ) { from = parseInt(result[1]); to = parseInt(result[2]); } scope.from = from; scope.to = to; }; scope.$watch("from", function(newval) { var result = constructRangeString(newval, scope.to); ngModel.$setViewValue(result); }); scope.$watch("to", function(newval) { var result = constructRangeString(scope.from, newval); ngModel.$setViewValue(result); }); } }; });
它的用法是:
<range ng-model="ctrl.theRange" name="myRange" required="true"></range>
我怀疑过滤器是否可以将您带到任何地方,因为它们不会进行2向绑定。
编辑 :即使这解决了问题,我还是建议一种稍微不同的方法。我将range指令的模型定义为一个对象:
{ from: ..., to: ... }
这意味着ctrl.theRange示例中变量的输出将是与上述对象类似的对象。如果您确实想要字符串格式"from/to",请在ngModel管道(即constructRangeString()函数)中添加解析器/格式器。使用解析器/格式化程序,ctrl.theRange变量将获得所需的字符串格式,同时使代码更模块化(该constructRangeString()函数位于指令的外部)和更参数化(该模型采用易于处理和转换的格式)。
ctrl.theRange
"from/to"
ngModel
constructRangeString()
以及概念证明:http : //jsfiddle.net/W99rX/