Angularjs dynamically create models

Question

I'm looping through a result set and dynamically creating model values, such as:

     angular.forEach(users, function(user) {
           $scope.usersModels.online[user.id] = 0;
           $scope.usersModels.online[user.id]['checked'] = 'checked';
           $scope.$watch('usersModels.online[user.id]', function(val) {
                  console.log(val);

           });
     });

I'm also trying to watch the change of these models and get the value. This doesn't work however, any ideas what's wrong?

Thanks!

EDIT:

angular.forEach(users, function(user) {
       $scope.usersModels.online[user.id] = {};
       $scope.usersModels.online[user.id]['value']   = 0;
       $scope.usersModels.online[user.id]['checked'] = 'checked';
       $scope.$watch(function() {
            return $scope.usersModels.online[user.id]['value'];
       }, function(val) {
            console.log(val);
       });
 });

or use function as first argument to $watch. $scope.$watch(function () { return $scope.usersModels.online[user.id] }, /* handler */) — Artem
– Artem, Commented Apr 17, 2013 at 4:23
@dave - I think the way you use $watch() is fine. Before we look at the cause of your problem, I want to point out that the way you assign object references in the code does not make sense. Assuming we have a user id of 1. $scope.usersModels.online[1] = 0; implies the property is pointing a primitive type, 0. But then comes $scope.usersModels.online[user.id]['checked'] = 'checked'; and all the sudden you are treating the same property as if it was an object , which has a property named checked. It could very well be a typo. Either way, please have that fixed first. — tamakisquare
– tamakisquare, Commented Apr 17, 2013 at 4:29
We would need to see more code to help with that. Is your forEach loop inside an $http success callback, or some 3rd-party AJAX callback? If the latter, $apply() is needed. Is usersModel.online[user.id].checked defined when the view is first rendered? — Mark Rajcok
– Mark Rajcok, Commented Apr 17, 2013 at 15:18

tamakisquare · Accepted Answer · 2013-04-17 17:09:43Z

The code you provided does not give us a complete picture. Some of the missing pieces are:

The code for populating the users object
The view code that shows how you bind the inputs to the models

Hence, I need to make some assumptions:

The code for populating the users object is not the cause of the problem.
The input that binds to the checked property is a checkbox.

With the assumptions in mind, one immediate problem I find in your code is that you assign a string value, "checked", to the checked property when you should be using a boolean value. Two-way binding for checkbox input works with boolean value only.

Since I don't get to see the complete picture, it's hard for me to say if that's the only problem with your code. Based on the information you have given, I created a working plunkr. Note that I simply assigned an object of three user ids to generate the users object with the assumption made above. Compare it to your code and identify other possible problems, if any. Please be sure to report back if you found other errors in your code, as it might do good for new comers.

Collectives™ on Stack Overflow

Angularjs dynamically create models

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related