Question

我在html页面中有一个表单：

<div ng-controller="ctrl as c">
      <form name="myForm">
        <input type="text" name="myInput" require/>
     </form>
</div>

我想在控制器中观察输入的变化，所以我喜欢这样：

angular.module('app').controller('ctrl', ctrl);
ctrl.$inject = ['$scope'];

function ctrl($scope) {
    var vm = this;
    $scope.$watch('myForm.myInput', function (value) {
       //check validity
    });
}

但是当我改变输入值时，控制器中什么也没发生。有什么想法吗？

Answer 1

$scope.watch()函数会创建一个变量的监视。

因此，您需要将范围绑定到输入并为该变量创建监视。

查看：

<input type="text" ng-model="myInput" name="myInput" require/>

控制器：

function ctrl($scope) {
    var vm = this;
    $scope.myInput = "";
    scope.$watch('myInput', function(newValue, oldValue) {
       // Your logic
    });

}

我认为观看整个表单可能会产生性能影响，但仍然可以通过手表

观看多个变量

1。创建一个$ scope对象，如

     $scope.form = {
             name:"My Name",
             Id:"My Id:,
             ....
       }

现在，您可以将$watch与第三个变量＆＃39; true＆＃39;

一起使用

    $scope.$watch('form', function(newVal, oldVal){
       console.log('changed');
     }, true);

Html：

         <input type="text" ng-model="form.name" name="myName" require/>
         <input type="text" ng-model="form.id" name="myId" require/>

2。使用$scope.$watchCollection

       $scope.$watchCollection('[item1, item2]', function(newValues, oldValues){
         // You logic here
        // newValues and oldValues contain the new and old value  of the array      
        });

另请查看此post，了解使用$watch

收听多个元素更改的不同方式

Answer 2

<div ng-controller="ctrl as c">
  <form name="myForm">
    <input type="text" name="myInput" ng-model="c.myInput" require/>
 </form>
</div>

控制器

function ctrl($scope) {
  var vm = this;
  vm.myInput = 'hello';
  $scope.$watch(function(){
       return vm.myInput;
     }, function(newValue, oldValue) {
        console.log(newValue)
  });

}

角度表输入不起作用

2 个答案: