检测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>

您也可以使用控制器或指令来实现相同的功能.查看一些实例 - > 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.使用指令

Diretives可以将某些行为附加到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).