angular forEach嵌套$watch 监测input值的变化，输出都是undefined

Question

页面有多个input，页面结构如下

 <div class="weui-cell__bd">
     <div class="col-10">
          <input class="weui-input" placeholder="姓名" type="text" ng-model="fast1.name"/>
      </div>
      <div class="col-14">
           <input class="weui-input" placeholder="号码" type="text" ng-model="fast1.number"/>
       </div>
</div>

获取所有的input框监测值是否变化

$scope.fast1= {
            name: '',
            number: ''
        } 
 var inputArr = angular.element('.weui-input');
  angular.forEach(inputArr, function(item) {

     $scope.$watch(item.value, function(newValue, oldValue) {
             console.log(newValue);
             console.log(oldValue);
                  
                });
            });

输出的都是undefined，请问是怎么回事

Answer 1

你监听的item是一个局部变量，而$scope.$watch监听的的是$scope作用域下的变量，所以从理论上来说，是监听不到的，故而输出undefined。

更新代码：

<div class="weui-cell__bd" ng-repeat="fast in fasts track by $index">
     <div class="col-10">
          <input class="weui-input" placeholder="姓名" type="text" ng-model="fast.name"/>
      </div>
      <div class="col-14">
           <input class="weui-input" placeholder="号码" type="text" ng-model="fast.number"/>
       </div>
</div>

$scope.fasts= [{name: 'name1',number: 'number1'},{name: 'name2',number: 'number2'},{name: 'name3',number: 'number3'},{name: 'name4',number: 'number4'}]

     $scope.$watch('fasts', function(newValue, oldValue) {
         console.log(newValue);
         console.log(oldValue);
    });

Answer 2

$scope.$watch('fast1.name', ...)
$scope.$watch('fast1.number', ...)

Answer 3

angular这么用不会影响性能么？四组姓名电话应该能用ng-repeat循环出来吧。双向数据绑定，如果不是特殊的需求，应该用不到监听。