Javascript 根据长度在文本输入上调用angularjs函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30266088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling angularjs function on text input based on length
提问by blue piranha
I have a text box. I would like to call a method inside controller only when user has filled in 'n' or more number of characters in the textbox.
我有一个文本框。只有当用户在文本框中填写了“n”个或更多字符时，我才想在控制器内部调用一个方法。
Can someone please give me pointers on how to approach this?
有人可以告诉我如何解决这个问题吗？
Thanks
谢谢
采纳答案by Shadow3188
Id recommend just using ngChangeand binding to an evaluation function. Below is a sample
我建议只使用ngChange并绑定到评估函数。下面是一个示例
angular.module('inputChange', [])
.controller('TextInputController', ['$scope', function ($scope) {
var inputMin = 3;
$scope.someVal = '';
$scope.result = '';
$scope.textChanged = function() {
if ($scope.someVal.length >= inputMin) executeSomething()
else $scope.result = '';
};
function executeSomething() {
$scope.result = $scope.someVal;
};
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="inputChange" ng-controller="TextInputController">
<input type="text" ng-model="someVal" ng-change="textChanged()" ng-Trim="false" />
<br />
someVal: <span ng-bind="someVal"></span>
<br />
Result: <span ng-bind="result"></span>
<br />
someVal Length: <span ng-bind="someVal.length"></span>
<br />
Result Length: <span ng-bind="result.length"></span>
</div>回答by Pankaj Parkar
You could simply achieve this by using ng-keyupdirective
您可以通过使用ng-keyup指令简单地实现这一点
ng-keyup="(1myNgModel.length >= n) && myFunction()"
Desired function will only gets called only if length of model is greater than equal to nlength
只有当模型的长度大于等于n长度时才会调用所需的函数
Though the better version would be having ng-model-optionswith debouncetime, so that it will reduce number of value change. After that we can easily use ng-changedirective to fire function.
虽然更好的版本会ng-model-options随着debounce时间的推移而存在，因此它将减少值更改的次数。之后我们可以很容易地使用ng-change指令来触发函数。
<input type="text" ng-model="myNgModel"
ng-change="(myNgModel.length >= 3) && myFunction()"
ng-model-options="{ debounce: 200 }" />
回答by scniro
You can add a directive to your element and $watchfor model changes. Then you can fire any logic you wish when your model has changed and has a value. In this case, lets call our model expression. Here is an example for a <textarea>element. This approach can just as well be used for an <input />element as well.
您可以向元素和$watch模型更改添加指令。然后，当您的模型更改并具有值时，您可以触发您希望的任何逻辑。在这种情况下，让我们调用我们的模型expression。这是一个<textarea>元素的例子。这种方法也可以用于<input />元素。
<textarea watcher ng-model="expression"></textarea>
app.directive('watcher', [function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
scope.$watch(attrs.ngModel, function (v) {
if(v) {
// you have a value
} else {
// no value
}
});
}
}
}]);
回答by bioball
A good way to do this is to use a directive. Here's how it might be done:
这样做的一个好方法是使用指令。以下是它的实现方式：
view:
看法：
<div ng-app="foo" ng-controller="fooController">
<textarea text-length-handler="doThing()" text-length="6" ng-model="text">
</textarea>
</div>
js:
js：
angular.module('foo', [])
.directive('textLength', function(){
return {
restrict: 'A',
require: 'ngModel',
scope: {
textLengthHandler: '&'
},
link: function ($scope, $element, $attrs, ctrl) {
var limit = parseInt($attrs.textLength);
var handler = function(){
if (ctrl.$modelValue.length >= limit) {
$scope.textLengthHandler()
}
};
$element.on('keypress', handler);
// remove the handler when the directive disappears
$scope.$on('destroy', function(){
$element.off('keypress', handler)
});
}
}
})
Fiddle here:
在这里小提琴：
回答by Giliar Perez
If you tie the input field to a variable using ngModel, you can watch it from the controller (is not very elegant, though) using $watch or $observe whenever it changes, and check the length.
如果您使用 ngModel 将输入字段绑定到一个变量，您可以在控制器发生变化时使用 $watch 或 $observe 观察它（虽然不是很优雅），并检查长度。
