13

我试图弄清楚如何$scope.$watch在数组中的每个元素上设置 a 。我只关心每个元素的某些属性。

在我的示例中，每个rental_date对象都具有三个属性：date、start_time和stop_time。每当start_time更改时，我希望stop_time将 设置为start_time.

$ngResource调用（使用Angular 1.1.5）：

Agreement.show( 
  id: 5 
).$then ((success) ->
  $scope.agreement = success.data.agreement

  # returns an array of rental dates
  $scope.rental_dates = success.data.rental_dates

  # $watch goes here

$watch以下是我尝试过的函数的四种变体：

1：

angular.forEach $scope.rental_dates, (date, pos) ->
  $scope.$watch date.start_time, ((newval, oldval) ->
    $log.info 'watch changed'
    $log.info newval
    $log.info oldval
  ), true

2：

angular.forEach $scope.rental_dates, (date, pos) ->
  $scope.$watch $scope.rental_dates[pos].start_time, ((newval, oldval) ->
    $log.info 'watch changed'
    $log.info newval
    $log.info oldval
  ), true

3：

angular.forEach $scope.rental_dates, (date, pos) ->
  $scope.$watch 'rental_dates[pos].start_time', ((newval, oldval) ->
    # also tried '$scope.rental_dates[pos].start_time'

    $log.info 'watch changed'
    $log.info newval
    $log.info oldval
  ), true

4：

这确实有效，但目前，我想不出一个优雅的解决方案来仅访问我关心的值$watch而不是整个数组。

$scope.$watch 'rental_dates', ((newval, oldval) ->
  $log.info 'watch changed'
  $log.info newval
  $log.info oldval
), true

有没有人在他们自己的项目中做过类似的事情？

4

3 回答 3

27

我假设您以某种方式使用 ng-repeat 为数组的每个条目生成 UI 元素？为这些 UI 元素中的每一个分配一个 ng-controller。将为每个数组元素实例化控制器。在该控制器内部，使用 $watch。

<div ng-repeat="rentalDate in rental_dates" ng-controller="RentalDateController">
</div>

然后在您的控制器代码中：

angular.module(...).controller('RentalDateController', function ($scope) {
    $scope.$watch('rentalDate.start_time', function (startTime) {
        ...
    });
});

这是一个小例子：http ://plnkr.co/edit/lhJ3MbULmahzdehCxVeM?p=preview

于 2013-08-07T15:24:36.690 回答
8

我认为如果您将第一个$watch参数更改为：（'rental_dates['+pos+'].start_time'$ watch将角度表达式作为第一个参数，并且 pos 不属于您的范围），我认为解决方案 3 将起作用。

（虽然这应该可行，但我认为这不会很有效。也许您应该考虑同时更新 start_time 和 stop_time 而不是观察所有开始时间的变化。）

于 2013-08-07T15:08:56.343 回答
8

如果您想查看作为集合的一部分的对象中的特定字段，并且如果您通过 ng-repeat 在视图中迭代集合的项目，并且如果您将要监视的字段绑定到可以具有 ng 的控件-change，您始终可以使用 ng-change 处理程序处理观察方面。例如：

 <div ng-repeat="binding in bindings track by $index">
     <input ng-model="binding" ng-change="changed(binding)">
 </div>

在js中：

 scope.changed = function(binding){
      .....
 }
于 2015-11-19T10:55:08.180 回答