Thursday, 15 January 2015

AngularJS ng-repeat list not updating with new array values -


I am trying to learn AngularJS (with ionic framework) and it is stuck because I can not find my page

I have to delete an item that works.

When I click delete, the page disappears from that single page so far are all good.

However, when I try to add / add a new item, nothing happens. If I debug in chrome and inspect the timentary array, then I can know that the item is being added to the array, but the page does not update to display the new item.

I do not understand that my DeleteItem works perfectly well, but testAdd does not work

Simplified code below ... in my html I have :

  & lt; Ion-list ng-controller = "EntriesCtrl" & gt; & Lt; Ion-item ng- Repeat = "Entry in Model. TimeInteces" & gt; & Lt; Div class = "row" & gt; & Lt; Div & gt; {{Entry.JobCode}} & lt; / Div & gt; & Lt; Div & gt; {{Entry.Description}} & lt; / Div & gt; & Lt; Div & gt; {{Entry.MinutesSpent}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; Ion-option-button ng-click = "delete item (entry, $ index)" & gt; & Lt; / Ion options button & gt; & Lt; / Ion item & gt; & Lt; / Ion list & gt; & Lt; A ng-click = "testAdd ()" & gt; Add new & lt; / A & gt;  

I have in my controller:

  $ scope.model = {TIMEInteces: [ID: 1, Date: New date (), JobCode : 'JobCode .123', Description: "Blah Blah Blah", Timespain: 15}, {ID: 2, Date: New Date (), JobCode: 'JobCode1', Description: "Blah Blah", Timespaint: 25 }, ID: 3, Date: New Date (), JobCode: 'JobCode .12', Description: "Blah Blah Blah", Timespain: 45}, {ID: 4, Date: New Date (Date), JobCode: Jobcode .3 ', Description: "Blah Blah Blah", Timespain: 1 15}]}; $ Scope.testAdd = function () {$ scope.model.TimeEntries.push ({ID: 5, Date: New Date), JobCode: 'JobCode1', Description: "Blah Blah", Timspace: 25}); } $ Scope.deleteItem = Function (Entry, Index) {$ scope.model.TimeEntries.splice (index, 1); }  

Pyetras' solution is correct, but I have a follow-up question.

In my app.js, I define the page EntriesCtrl

  .state ('app.timesheetDay', {url: "/ timesheet-day / {Date} ", using views: {'menuContent': {templateUrl:" templates / tileheet - day.html ", Controller: 'EntriesCtrl'}}})  

Because I defined that page to use EntriesCtrl, I thought that a function told from that page would be automatically in the correct area?

Why did not the test () run under the right scope in the example above?

After being naked around it seems that if I remove the NG-controller feature then the original test works perfectly well, so I think that it is my state config and page

Your add button is outside of the controller Scope, move it inside the controller element like this:

  & lt; Ion-list ng-controller = "entriescotron" & gt; & Lt; Ion-item ng- Repeat = "Entry in Model. TimeInteces" & gt; & Lt; Div class = "row" & gt; & Lt; Div & gt; {{Entry.JobCode}} & lt; / Div & gt; & Lt; Div & gt; {{Entry.Description}} & lt; / Div & gt; & Lt; Div & gt; {{Entry.MinutesSpent}} & lt; / Div & gt; & Lt; / Div & gt; & Lt; Ion-option-button ng-click = "delete item (entry, $ index)" & gt; & Lt; / Ion options button & gt; & Lt; / Ion item & gt; & Lt; A ng-click = "testAdd ()" & gt; Add new & lt; / A & gt; & Lt; / Ion list & gt;  

No comments:

Post a Comment