Databases
StackOverflow2013
Postsdbo
POangularjs removing items from $scope.array not reflecting in the view
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POangularjs removing items from $scope.array not reflecting in the view
    text
    copied!<p>I have a simple model array (coming from rest API)</p> <pre><code>[{"applicationId":"64","createTime":"2012-07-13T14:56:06.395 07:00","createdByUserId":"s.s@s.com","lastActiveTime":"2012-08-31T13:45:49.869- 07:00","lastModifiedTime":"2012-07-13T14:56:06.395- 07:00","locationId":"16","locked":"1","scope":"1","stage":"STAGE_USER","status":"in progress","useStatus":"N","userId":"dd.hello@gmai.com"}] </code></pre> <p>I have a checkbox in the html page that when checked will only display items that have a status of "submitted". So I created a watch as follows:</p> <pre><code>$scope.$watch('showOnlySubmitted', function(newVal, oldVal){ if(newVal) { angular.forEach($scope.applicationsCopy, function(app, index){ if(app.status &amp;&amp; app.status!=="submitted"){ console.log("removed element at index: " + index); console.log(app.applicationId + " : " + app.status); $scope.applications.splice(index,1); } }); } else { $scope.applications = angular.copy($scope.applicationsCopy); console.log("checkbox was un clicked !!"); } }); </code></pre> <p>As you can see I made a copy of the model so that when the user unchecks the filter, I can recopy the original model back.</p> <pre><code>.factory('applicationService', function($http) { return { getApplications: function(callback) { $http.get('applications', {'8080': ':8080'}).success(callback); } } }) </code></pre> <p>and</p> <pre><code>$scope.applicationsCopy = angular.copy($scope.applications); </code></pre> <p>I can see in the console that the array is getting spliced if the item status is not "submitted", but the spliced items are still visible in the view !.</p> <p>The view is bound to $scope.applications as follows:</p> <pre><code>&lt;tr ng-repeat="app in applications"&gt; &lt;td&gt;{{app.applicationId}}&lt;/td&gt; &lt;td&gt;{{app.projectName}}&lt;/td&gt; &lt;td&gt;{{app.createTime}}&lt;/td&gt; &lt;td&gt;{{app.status}}&lt;/td&gt; &lt;td&gt;{{app.createdByUserId}}&lt;/td&gt; &lt;/tr&gt; </code></pre> <p>Thank you for your help !.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload