Ng-repeat not updating after array change

1

I have an array that contains objects for cards in a template to loop through. If it detects that there isn’t anything in the local datastore it will create an array that contains object. Otherwise it retrieves it from the local datastore. Pressing a button will bring you to another view that shares the same controller. There is a text box and if you press the submit button it will splice it to the array. I also have a watch function updating the local datastore if change is detected.

The problem is after adding something to the array ng-repeat won’t update. It will if I refresh the page only because the local datastore loads.

Any ideas?

Code: controllers.js

.controller('NotesCtrl', function($scope, localStorageService) {
if (!localStorageService.get("agendaNotes")) {
    $scope.notes = [{
        title: "Civil War Notes"
    }, {
        title: "Types of Bacon"
    }];
    //If it exists retrieve it from keystore.
} else {
    $scope.notes = localStorageService.get("agendaNotes");
}

$scope.addNote = function(title) {
    $scope.notes.splice(0, 0, {
        title: title
    })
};

$scope.$watch("notes", function(newVal, oldVal) {
    if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
        localStorageService.add("agendaNotes", angular.toJson(newVal));
    }
}, true);

})

tab.notes.html

<ion-view view-title="Notes">
  <ion-content class="padding" ng-init="init()">
    <!-- To Do List for Notes:

    - Store Text in Object
    - Phonegap Camera API
    - Store Image in Object
    -->

    <a class="button button-full button-royal" href="#/tab/new">
      Add Notecard
    </a>

    <div class="card" ng-repeat="note in notes track by $index">
  <div class="item item-divider">
    {{note.title}}
  </div>
  <div class="item item-text-wrap">
    {{note.content}}  </div>
</div>
  </ion-content>
</ion-view>

new-note.html

<ion-view view-title="New Note">
    <ion-content>
        <!-- To Do:
      - Description
      - Images (?)
      -->
        <form ng-submit="addNote(data.newTitle, data.newDescription); data.newTitle = ''; data.newDescription = ''">
            <div class="list">
                <div class="list list-inset">
                    <h3>Note Title:</h1>
                    <label class="item item-input">
                        <input type="text" placeholder="Title" ng-model="data.newTitle">
                    </label>
                  <h3>Note Description:</h3>
                    <label class="item item-input">
                        <input type="text" placeholder="Description" ng-model="data.newDescription">
                    </label>
                </div>
                <button class="button button-block button-positive" type="submit">
                    Add Note
                </button>
            </div>
        </form>
    </ion-content>
</ion-view>

Any help is appreciated. Thanks

2

Issue Solved. It would create two different childscopes. Using a factory service instead.

1 Like
3

Can you please
tell the solution ? I am facing similar kind of issue.

<div class="checkbox" ng-repeat="outlet in (filteredOutlets.selectedItems = (changedoutletsList | filter:outletsFilter))">

even if changedoutletsList value changes, ng-repeat won’t be updated.