我正在寻找一个新的angular指令,其目的是将输入的ngmodel值与其他某个值进行比较,并检查它们是否相等。
如果它们相等,则我希望此输入有效。否则无效。
<div ng-repeat="one in many">
<ng-form name="somethingToValidate">
<input type="text" ng-model="one.userTypedText"
required mustbeequalto="one.someOtherValue" />
</ng-form>
</div>
这是完成时使用的“ mustbeequalto”指令的示例。
1)请注意{{one.someOtherValue}}可以随时更改,因此此指令必须知道此值的2路绑定性质。
2)我将在ng-repeat中使用它,因此它应该足够聪明以仅在包含它的特定ng-form的范围内工作。
我认为我需要验证指令,但是如果您认为有更好/更优雅的方法,请提出建议。我尝试创建此指令,但失败了。
编写一个返回值的函数ng-model
:
require: 'ngModel',
link: function(scope, element, attributes, ngModelController) {
var getModelValue = function() {
return ngModelController.$viewValue;
};
如上所示,您可以通过检索此内容ngModelController.$viewValue
。该ngModelController
可作为通过要求它在链接功能的第四个参数。
编写一个函数,该函数返回传递给must-be-equal-to
属性的值:
var getMustBeEqualToValue = function() {
return scope.$eval(attributes.mustBeEqualTo);
};
您可以使用该$eval
方法在当前作用域上执行表达式以获取正确的值。
编写一个设置有效性的函数:
var setValidity = function (isValid) {
ngModelController.$setValidity('mustBeEqualTo', isValid);
};
用于每次$watch
执行更改setValidity
的值ng-model
:
scope.$watch(getModelValue, function(newValue, oldValue) {
if (newValue === oldValue) return;
setValidity(newValue === getMustBeEqualToValue());
});
使用$watch
要执行setValidity
什么被传递到每次的价值must-be-equal-to
属性的变化:
scope.$watch(getMustBeEqualToValue, function(newValue, oldValue) {
if (newValue === oldValue) return;
setValidity(getModelValue() === newValue);
});
演示: http ://plnkr.co/edit/w9t0uk6l0HL0QYi40Cth?p = preview
有优化的余地,但是该示例有望成为一个良好的开端。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句