0

When I replace an object that contains a property that is being watched with another instance of that object... AngularJS seems to lose the reference to that property... which I can understand... but what is a good way to reconnect that members property in, say, an ng-repeat directive. For example...

HTML

<div ng-repeat="portfolio in data.portfolios">
  {{ portfolio.name }}
<div>

JS

$scope.data = {};
$scope.data.portfolios = [
    { Name: "aaa" },
    { Name: "bbb" }
];

 $scope.portfoliosService.loadPortfolios(clientId, true, true)
    .success(function (response) {
        $scope.data = response.data;
    });

Note: response.data contains an array called portfolios.

Brian Rice
  • 3,107
  • 1
  • 35
  • 53
  • if you want to preserve the existing objects in the array, you could use `angular.merge()` (1.4x+) to merge the response data with the client information that already exists. Side note: `.success` and `.error` are deprecated, and `.then` should be used instead. https://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6 – Claies May 26 '18 at 00:14
  • obviously your `$scope.data` will change its contents because you're changing the whole reference, try this `$scope.data.portfolios = response.data` – John Velasquez May 26 '18 at 01:24
  • 1
    Check your capitalization -- `Name != name` – georgeawg May 26 '18 at 05:35

1 Answers1

1

I think the problem is that you losing portfolios property while assigning response.data to the $scope.data. So, ng-repeat will never render as there is no property portfolios after assigning response.data.

So, its not about watch , angular is still watching $scope.data , its just that ng-repeat cant find portfolios property anymore Check this plunkr

Just change your code to

$http.get('data.json')
 .then(function (response) {
    $scope.data.portfolios = response.data;
});

Also, Dont use success as it has been deprecated

One other scenario which is covered in plunkr . Let me know if it covers what you were looking for. In here, I have assigned a property to $scope.data

Shashank Vivek
  • 16,888
  • 8
  • 62
  • 104
  • The problem is "response.data" has about a dozen other properties... so I would have to copy them one by one... it sounds like, then, that once $scope.data is assigned... there is no way to reconnect the html to the new data? – Brian Rice May 26 '18 at 15:00
  • @BrianRice : Can you check https://plnkr.co/edit/siapXv4vKrGrLv5rL8Pz?p=preview and let me know if this is what you were concerned abt ? can you create a plunkr to explain better your problem ? I think my 2 plunkrs is covering what you are looking for – Shashank Vivek May 27 '18 at 04:05
  • Ok... do your example works exactly like what I wanted... not sure why this doesn't seem to work in my code... will examine further... thanks! – Brian Rice May 28 '18 at 22:34
  • @BrianRice : Sure, just check if it's related to `digest` cycle in your case. :) – Shashank Vivek May 29 '18 at 03:42