检测angularjs中的输入文本长度

Question

我是Angularjs的初学者

<div ng-app>
  <input type="text" ng-model="Number"/>
</div>

我知道可以使用{{Number.length}}来显示输入字段长度， 但如何检测长度 等。

if (length == 0) {
  // do something
} else if (length == 1) {
  // do something
}

任何建议都将受到高度赞赏。

Answer 1

有很多方法可以做到这一点。

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>

你也可以使用控制器或指令来实现同样的目的。 查看一些实际操作示例 - ＆gt; http://jsbin.com/vaxohi/4/edit

2。使用控制器

您可以在控制器中观看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');
     }
  });
});

然而，这样做并不是一个好习惯。最好的方法是使用指令。

3。使用指令

指令可以将某些行为附加到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');
        }
      });
    }
  };
});

顺便说一句......

我看到你的ng-app指令是空的。不要忘记为您的应用ng-app="appName"传递模块名称，并定义一个名称为angular.module('appName', []);的模块（请参阅jsbin）。

Answer 2

您可以使用 ng-change

例如

<input type="text" ng-model="Number" 
ng-change="(Number.length>0)?alert('ok'):alert('no')"/>

或者您可以指定要在更改时执行的功能

<div ng-app="app">
     <div ng-controller="test">
<input type="text" ng-model="Number" 
    ng-change="checkLength()"/>
    </div>
</div>

和Js代码

angular.module('app', [])
  .controller('test',function($scope){
     $scope.checkLength = function(Number){
    if(Number.length>0){
    //
    }
}
})