Use watchCollection on the items

tinydesk · Apr 28, 2016 · 2fb5365 · 2fb5365
1 parent 11e8b50
commit 2fb5365
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -47,6 +47,7 @@
         </fieldset>
         <button type="button" class="btn btn-default" ng-click="fixSize()">Fix size</button>
         <button type="button" class="btn btn-default" ng-click="changeData()">Change Data</button>
+        <button type="button" class="btn btn-default" ng-click="insert()">Insert</button>
       </form>
     </div>
 
@@ -96,13 +97,26 @@
           };
 
           $scope.parentScopeValue = 'Outer scope';
+
+          $scope.insert = function() {
+            $scope.data.splice(0, 0, {
+              id: $scope.data.length,
+              name: "Some Test Name " + $scope.data.length
+            });
+          };
+
+          $scope.remove = function(item) {
+            $scope.data.splice($scope.data.indexOf(item), 1);
+          };
         }]);
     </script>
     <script type="text/ng-template" id="SimpleCell">
         <div class="item-cell-padding">
           <div class="item-cell">
             <p>{{ item.name }}</p>
-            <p>{{ parentScopeValue }}</p>
+            <div>
+              <button class="btn btn-default" ng-click="remove(item)">Remove</button>
+            </div>
           </div>
         </div>
     </script>

diff --git a/dist/tileview.js b/dist/tileview.js
@@ -100,7 +100,7 @@
                         });
                         layout();
                     });
-                    scope.$watch('items', function () {
+                    scope.$watchCollection('items', function () {
                         lastScrollPosition = Number.NEGATIVE_INFINITY;
                         layout();
                     });

diff --git a/src/tileview.ts b/src/tileview.ts
@@ -109,7 +109,7 @@ declare const angular: any;
           });
           layout();
         });
-        scope.$watch('items', () => {
+        scope.$watchCollection('items', () => {
           lastScrollPosition = Number.NEGATIVE_INFINITY;
           layout();
         });