0

I am new to angular and I have built some controller with angular which is shown in below.

var app = angular.module('jobs', []);
app.controller('DaCtrl',function(){
    this.itemlist = [{id:"001"},{id:"002"},{id:"003"}];
});

What I need is to update "itemlist" property dynamically by calling a function and display the items using ng-repeat I tried like this and it didnt work :(

What I have tried so far JSFiDDLE

Updated FIDDLE

N8FURY
  • 9,490
  • 3
  • 14
  • 14
  • 1
    You didn't call the function `addItems`... – elclanrs Nov 13 '14 at 19:58
  • I am calling that function through some other function I didn't mention it in the fiddle. Though I called to the addItems function it didn't work. – N8FURY Nov 13 '14 at 20:02
  • Works for me in Chrome http://jsfiddle.net/pprkng7o/4/ – elclanrs Nov 13 '14 at 20:03
  • worked for me too just adding the function, your problem is beyond the scope of the example – aw04 Nov 13 '14 at 20:07
  • @elclanrs yes it's working in the page load but when call it again with some other dataset it won't work.Can you check the updated fiddle. (I have updated the fiddle) – N8FURY Nov 13 '14 at 20:08
  • how are you calling it? shouldn't you be using $scope as well? – aw04 Nov 13 '14 at 20:10
  • @aw04, Yes true I am not using $scope, is there anyway to do what I wanted ? – N8FURY Nov 13 '14 at 20:11
  • even with the updated fiddle, you're never calling the addItems function... not sure i see what you're trying to accomplish – aw04 Nov 13 '14 at 20:12
  • Can you paste the full code? – itamar Nov 13 '14 at 20:13
  • aw04 Can u see I am calling ajax() function and getting the object and then assigning it to the "itemlist" – N8FURY Nov 13 '14 at 20:16
  • 1
    yep i see that, but you're calling the ajax() function from within the addItems() function... which never gets called – aw04 Nov 13 '14 at 20:18
  • Though you call it , It's only working in page loads. When I call the "addItems" function again, the DOM is not updating. – N8FURY Nov 13 '14 at 20:28
  • @slicedtoad when I call that function with different dataset again after some time pagge loaded. DOM doesn't update. – N8FURY Nov 13 '14 at 20:30
  • 1
    oh, ok. this fiddle shows the actual problem: http://jsfiddle.net/pprkng7o/12/ – DanielST Nov 13 '14 at 20:32
  • it doesn't seem as though your fiddle example matches the problem which is why everyone keeps telling you the same thing... can you update your example please? – aw04 Nov 13 '14 at 20:33
  • @slicedtoad exactly that's problem. I ll update my question with your fiddle. – N8FURY Nov 13 '14 at 20:34
  • Ok, I don't know anything about angular and its making my head hurt trying instantly understand the concepts... But this might be useful: http://stackoverflow.com/questions/15475601/ng-repeat-list-in-angular-is-not-updated-when-a-model-element-is-spliced-from-th – DanielST Nov 13 '14 at 20:45
  • @slicedtoad it's possible $scope.$apply could be needed, depends on how exactly it's getting the data... i can get this example to work though, and there are simpler issues. for example in the function itemlist (the one bound to the ui) is never updated so it makes sense that it only works initially – aw04 Nov 13 '14 at 20:49
  • @aw04 Can you get the fiddle working ? – N8FURY Nov 14 '14 at 03:48
  • You can try something like this http://jsfiddle.net/themyth92/pprkng7o/26/. I have changed your onclick event using ng-click and assign the function addItems to $rootScope. On the controller, you can use $watch to watch for the changes in the listObj. – themyth92 Nov 14 '14 at 05:18
  • @themyth92 can I call the "addItems()" function from the script ? not with "ng-click" ? – N8FURY Nov 14 '14 at 05:57
  • 1
    Try something like this : http://jsfiddle.net/themyth92/pprkng7o/27/. Ref : http://stackoverflow.com/questions/11902379/why-do-we-need-ng-click#answer-20274848 – themyth92 Nov 14 '14 at 06:13
  • @themyth92 Well,that was a life saver.I did some modification and now can call the "addItems" function from anywhere(Even from the console) .Thanks every one. Here is the updated fiddle http://jsfiddle.net/Aveendra/pprkng7o/28/ – N8FURY Nov 14 '14 at 07:07

1 Answers1

0

You're almost there! It looks like you need to set the itemsList to the $scope variable, so it'll be available in your template.

Since you're a beginner, I recommend just putting everything on your $scope variable so you know they are accessible in the template and in your javascript, no matter what.

Here's the jsfiddle with a working solution (everything on $scope): http://jsfiddle.net/pprkng7o/25/

karissa
  • 94
  • 2
  • Can I call the function from out side I mean out side of the controller ? like "addItems()" without the button the click ? – N8FURY Nov 14 '14 at 03:35