angularjs computed property not updating after model changes -


i have simple activity viewer in table lists activities , statuses (read or not read) db. on page counter shows how many activities unread. each activity gives option mark read or mark unread depending on condition. reason after model being updated computed value not changing on counter.

controller

function activity($scope, $http, $templatecache) {     $http.get('/activity/get').success(function(data, status)     {         $scope.activities = data;     });      $scope.totalactivities = function()     {         var count = 0;          angular.foreach($scope.activities, function(activity)         {             count += activity.seen == 0 ? 1 : 0;         });          return count;     }      $scope.updateactivity = function(activity)     {         activity.seen = activity.seen == 0 ? 1 : 0;          $http({             method: 'put',             url:    '/activity/' + activity.id,             data:   { seen: activity.seen }         })         .success(function(data, status)         {             console.log(data);         });     } } 

counter

<span class="badge badge-alert">{{ totalactivities() }}</span> 

table row + button

<tr ng-repeat="activity in activities" ng-class="{ 'activity-read': activity.seen == 1 }">      <td>         <button class="btn btn-default" ng-click="updateactivity(activity)"><span>@{{ 0 == activity.seen ? 'mark read' : 'mark unread' }}</span></button>     </td> </tr> 

nav template (separate code block)

<div class="account-details" ng-controller="activity">     @if (sentry::hasaccess('admin'))     <a href="{{ route('activity.index') }}" class="activity pull-left">             <span class="badge badge-alert">@{{ totalactivities() }}</span>         </a>     @endif </div> 

the counter works fine when first loaded updates model need page refresh new calculation show.

something tells me aren't seeing relavant bits of code here.

when recreate example using $timeout instead of $http working fine:

var activity = function($scope, $timeout) {     console.log('creating controller');      var fakedata = [           {name: 'one',   seen: 0},            {name: 'two',   seen: 0},           {name: 'three', seen: 1},           {name: 'four',  seen: 0}     ];      $timeout(function () {         $scope.activities = fakedata;         console.log('data returned');     }, 500);      $scope.totalactivities = function () {         var count = 0;          angular.foreach($scope.activities, function (activity) {             count += activity.seen === 0 ? 1 : 0;         });          return count;     };      $scope.updateactivity = function (activity) {         activity.seen = activity.seen === 0 ? 1 : 0;          var payload = {             method: 'put',             url: '/activity/' + activity.id,             data: {                 seen: activity.seen             }         };          $timeout(function () {             console.log(payload);         }, 200);     }; }; 

jsfiddle here: http://jsfiddle.net/jwcarroll/ebsb4/


Comments

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -