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
Post a Comment