javascript - Angularjs two similar scopes one updates but the other doesn't -
javascript - Angularjs two similar scopes one updates but the other doesn't -
i've tried create simple illustration of issue i'm having angularjs. i've got simple scope called testscope. have 2 other scopes (grouped1 , grouped2) derived testscope have been altered using grouping function found in underscorejs.
script.js
var app = angular.module('testscope', []); app.controller('mainctrl', function($scope) { $scope.testscope = { test1: { data: [ { field1: 'blah', field2: 'blah blah' }, { field1: 'test', field2: 'test test' } ] } }; $scope.createentry = function(newentry) { $scope.test1.data.push({field1: newentry.field1, field2: newentry.field2}); }; $scope.test1 = $scope.testscope['test1']; $scope.grouped1 = _.groupby($scope.test1, 'field1'); $scope.grouped2 = _.groupby($scope.test1.data, 'field1'); }); index.html
<body ng-app="testscope" ng-controller="mainctrl"> <form ng-submit="createentry(newentry)"> field1: <input type="text" ng-model="newentry.field1" /> field2: <input type="text" ng-model="newentry.field2" /> <input type="submit" /> </form> info <div> {{ test1 }} </div><br> grouped1 <div>{{ grouped1 }}</div><br> grouped2 <div>{{ grouped2 }}</div> </body> the problem when modify scope (using form), test1 , grouped1 update grouped2 not. why doesn't grouped2 update , how grouped2 update when scope changes?
please see example: http://plnkr.co/edit/in8ladekdbxdp1cnf8vg?p=preview
the reference .groupby($scope.test1.data, 'field1') creates changes each time $scope.test1.data changes1. since $scope works based off of reference, changing allows info become stale or outdated.
to prepare this, can wrap scope in function. such this:
$scope.grouped2 = function() {return _.groupby($scope.test1.data, 'field1');}; and alter reference in html so:
grouped2 <div>{{ grouped2() }}</div> plunkr: here
javascript angularjs angularjs-scope
Comments
Post a Comment