13

I am trying to figure out how to set a $scope.$watch on each element in an array. I only care about certain attributes of each element.

In my example, each rental_date object has three attributes: date, start_time, and stop_time. Whenever the start_time is changed, I want the stop_time to be set to 2 hours after the start_time.

The $ngResource call (using 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

Here are the four variations of the $watch function I tried:

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:

This does work, but, at the moment, I can't think of an elegant solution to access only the values I care about $watching instead of the whole array.

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

Has anybody done something similar in their own projects?

Improve this question
2
  • How does the start_time change in your code ? Is it a user action or at least something you can track ? For something like this, if possible, I'd try to watch an array made with the ids of the values changed, then you watch this array instead of the whole data (but it needs to change the part of your code that modifies the start_time) Commented Aug 7, 2013 at 15:09
  • Both the start_time and stop_time are bound to Angular UI's timepicker directive. Whenever the user changes the start_time, I want the stop_time to be set to two hours afterwards. Commented Aug 7, 2013 at 15:19

3 Answers 3

Reset to default
27

I am assuming you're somehow using ng-repeat to generate UI elements for each entry of the array? Assign an ng-controller to each of these UI elements. The controller will be instantiated for each array element. Inside that controller, use $watch.

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

And then in your controller code:

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

Here is a little example: http://plnkr.co/edit/lhJ3MbULmahzdehCxVeM?p=preview

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

This works for me as well. Thank you. I have a few questions: 1) How can I tell what variables the controller inherits? Logging out the $scope to the console didn't show what variables I can play with. 2) Do you have any resources that explains angular inheritance (I think that is the concept here) for ng-controllers? Thanks again.
So, the watch function works, but if I attempt to log to the console the rental_date's stop time, the console throws me an error stating ReferenceError: rental_date is not defined. I can access the stop time using $scope.$parent.rental_date.stop_time but this doesn't seem very elegant.
So I have a lot to learn about how Angular/Javascript handles inheritance. $scope.rental_date works the same as $scope.$parent.rental_date.
$scope inheritance works similar to JavaScript's prototype chain inheritance: if a property or method is not found in the current scope, then the parent scope is checked, and so on. However, if you set a property in the current scope, then you're overwriting that property, hiding the parent scope's value. There is a Batarang extension for Chrome that might help you with debugging nested scopes.
bennadel.com/blog/… has a good example with accessing the properties or methods from the parent scope.
|
8

I think solution number 3 will work if you change the first $watch argument to: 'rental_dates['+pos+'].start_time' ($watch takes an angular expression as the first parameter, and pos isn't part of your scope).

(While this should work, I think this won't be really efficient. Maybe you should look into updating both start_time and stop_time at the same time instead of watching for changes on all the start times.)

Improve this answer

7 Comments

Hooray! This worked. Could you expound your last statement a bit more? I should explain myself as well: the start_time is bound to the the Angular UI timepicker directive. So, whenever a user changes the start_time, the stop_time is automatically set to two hours afterwards.
I don't know angularUI, but if it works like standard input tags, you should have some kind of "onChange" callback that you could use to update the stop_value when the start_value changes. Another solution would be to create a directive "updateRentalTime" that handles the editing of both values.
The beauty of AngularJS is that you don't need to build directives all the time if you don't want to reuse the code. If the code needed to be reusable, you could wrap my solution into a directive.
onChange UI event handlers are discouraged in AngularJS. The model should be the record of the current state of your application. Let the UI elements write the user changes into the model, then react on model changes.
@vsp, I'm still trying to wrap my head around your last comment. The client wants the stop_time to automatically update whenever the start_time is changed. Each timepicker directive has an ng-model attached: rental_date.start_time. I was using $scope.$watch to say, 'when this is changed, update that'. Is this not the right way?
|
8

If you want to watch on a specific field in an object that is part of a collection and if you have the collection's items iterated in the view by ng-repeat and if you have the field to be watched bound to a control that can have ng-change, you can always handle the watching aspect using the ng-change handler. eg:

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

and in js:

 scope.changed = function(binding){
      .....
 }
Improve this answer

1 Comment

This solution bypass the complexity of the previous solutions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.