Javascript 检测angularjs中的输入文本长度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29251129/
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
Detect Input text length in angularjs
提问by Duke
I am beginner in Angularjs
我是 Angularjs 的初学者
<div ng-app>
<input type="text" ng-model="Number"/>
</div>
I know can use {{Number.length}} to display input field length, But how detect length etc..
我知道可以使用 {{Number.length}} 来显示输入字段长度，但如何检测长度等。
if (length == 0) {
// do something
} else if (length == 1) {
// do something
}
Any advice would be highly appreciated.
任何建议将不胜感激。
回答by Dan Mindru
There are many ways to do this.
有很多方法可以做到这一点。
1. Using built-in directives + template
1.使用内置指令+模板
<div ng-app="app">
<input type="text" ng-model="Number"/>
<section ng-if="!Number">It's empty</section>
<section ng-if="Number">It's {{Number.length}}</section>
</div>
You could also use a controller or directive to achieve the same thing. See some examples in action -> http://jsbin.com/vaxohi/4/edit
您也可以使用控制器或指令来实现相同的目的。查看一些实际示例 -> http://jsbin.com/vaxohi/4/edit
2. Using a controller
2. 使用控制器
You can watch the value of Numberin a controller, like so:
您可以Number在控制器中查看 的值，如下所示：
app.controller('AppCtrl', function($scope){
$scope.Number = '';
$scope.$watch('Number', function(newValue){
if(newValue.length === 0){
console.log('Empty');
} else {
console.log('Has content');
}
});
});
However, it's not a good practice to do it like this. The best way to do it is by using a directive.
但是，这样做并不是一个好习惯。最好的方法是使用指令。
3. Using a directive
3. 使用指令
Diretives can attach certain behavior to DOM elements; there are many built-in directives (ng-if, ng-show, etc), but it's very common to create custom ones. Here's an example:
指令可以将某些行为附加到 DOM 元素；有许多内置指令（ng-if、ng-show等），但创建自定义指令很常见。下面是一个例子：
app.directive('numberLogic', function(){
return {
restrict: 'A',
scope: {},
template: "<input type='text' ng-model='Number2'/> {{Number2}}",
link: function(scope){
scope.$watch('Number2', function(newValue){
if(newValue.length === 0){
console.log('Second number Empty');
} else {
console.log('Second number Has content');
}
});
}
};
});
By the way...
顺便一提...
I see your ng-appdirective is empty. Don't forget to pass in a module name for your app ng-app="appName"and define a module with the same name angular.module('appName', []);(See the jsbin).
我看到你的ng-app指令是空的。不要忘记为您的应用程序传入一个模块名称ng-app="appName"并定义一个具有相同名称的模块angular.module('appName', []);（请参阅 jsbin）。
回答by A.B
you can use ng-change
你可以使用 ng-change
for example
例如
<input type="text" ng-model="Number"
ng-change="(Number.length>0)?alert('ok'):alert('no')"/>
or you can specify an function to be executed on change
或者您可以指定要在更改时执行的函数
<div ng-app="app">
<div ng-controller="test">
<input type="text" ng-model="Number"
ng-change="checkLength()"/>
</div>
</div>
And Js code
和 Js 代码
angular.module('app', [])
.controller('test',function($scope){
$scope.checkLength = function(Number){
if(Number.length>0){
//
}
}
})
