Converting an array to a nested object

Question

What I'm trying to do: I am trying to dynamically update a scope with AngularJS in a directive, based on the ngModel.

A little back story: I noticed Angular is treating my ngModel strings as a string instead of an object. So if I have this:

ng-model="formdata.reports.first_name"

If I try to pull the ngModel in a directive, and assign something to it, I end up with $scope["formdata.reports.first_name"]. It treats it as a string instead of a nested object.

What I am doing now: I figured the only way to get this to work would be to split the ngModel string into an array, so I am now working with:

models = ["formdata", "reports", "first_name"];

This works pretty good, and I am able to use dynamic values on a static length now, like this:

$scope[models[0]][models[1]][models[2]] = "Bob";

The question: How do I make the length of the dynamic scope dynamic? I want this to be scalable for 100 nested objects if needed, or even just 1.

UPDATE: I was able to make this semi-dynamic using if statements, but how would I use a for loop so I didn't have a "max"?

if (models[0]) {
    if (models[1]) {
        if (models[2]) {
            if (models[3]) {
                $scope[models[0]][models[1]][models[2]][models[3]] = "Bob";
            } else {
                $scope[models[0]][models[1]][models[2]] = "Bob";
            }
        } else {
            $scope[models[0]][models[1]] = "Bob";
        }
    } else {
        $scope[models[0]] = "Bob";
    }
}

Does $scope.formdata.reports.first_name work in your directive? — Pete
– Pete, Commented Apr 3, 2014 at 14:51

km6zla · Accepted Answer · 2014-04-03 15:04:19Z

2

This is an answer to

I noticed Angular is treating my ngModel strings as a string instead of an object

Add the require property to your directive then add a fourth ctrl argument to your link function

app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attributes, ctrl) {
      // Now you have access to ngModelController for whatever you passed in with the ng-model="" attribute
      ctrl.$setViewValue('x');
    }
  };
});

Demonstration: http://plnkr.co/edit/Fcl4cUXpdE5w6fHMGUgC

edited Apr 3, 2014 at 15:04

answered Apr 3, 2014 at 14:59

km6zla

4,9272 gold badges32 silver badges53 bronze badges

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

1 Comment

JoshT Over a year ago

Wow that helps so much. I knew I was overthinking this!

Tibos · Accepted Answer · 2014-04-03 14:53:37Z

0

Dynamic pathing:

var obj = $scope;

for (var i = 0; i<models.length-1; i++) {
  obj = obj[models[i]];
}
obj[models[models.length-1]] = 'Bob';

Obviously no checks are made, so if the path is wrong it will fail with an error. I find your original problem with angular suspicious, perhaps you could explore a bit in that direction before you resort to this workaround.

answered Apr 3, 2014 at 14:53

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

1 Comment

JoshT Over a year ago

I'm doing this so ng-model="formdata.reports.first_name" can be changed to either "first_name" or "formdata.reports.fe.fi.fo.fum.first_name" without breaking my directive. I don't know, maybe I'm overthinking things?

Collectives™ on Stack Overflow

Converting an array to a nested object

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related