Adding objects to the DOM after adding new data to the list

Question

I have an array of objects which i populate on a button click.

When populating this array i make sure that i only add 10 objects to it. When this is all loaded in the dom i give the user the oppertunity to add a few more objects.

I do this like this:

$scope.Information = [];

 $.each(data, function (i, v) {

    if (i<= 9)
     $scope.Information.push(data[i]);

     if(i >= 10) {
         cookieList.push(data[i]);
      }

}

 if (cookieList.length) {
     localStorage.setItem("toDoList", JSON.stringify(cookieList));
     $(".showMore").removeClass("hidden");
  }

    $(".showMore").on("click", function() {
        var obj = JSON.parse(localStorage.getItem("toDoList"));
        console.log(obj);
        console.log(obj.length);
        SetSpinner('show');
        $scope.Information.push(obj);
        SetSpinner('hide');
        //$.removeCookie("toDoList2");
    });

part of the HTML:

       <div ng-repeat="info in Information" class="apartment container" style="padding-right:35px !important">

              <div class="row" style="height:100%">
                   <div class="col-md-1 col-xs-12">
                       <div>
                           <h4 class="toDoListHeadings">Nummer</h4>
                           <div style="margin-top: -15px; width:100%">
                               <span class="toDoListItems number">
                                    {{info.orderraderid}}
                                </span>
                           </div>
                       </div>
                    </div>
              </div>
       </div>

My issue: When i add objects to my array of objects "$scope.Information.push(obj);" I assumed that they would get added in the DOM but they do not, how do i do this the angular way?

EDIT MY SOLOUTION:

edited the HTML to use ng-click and the method is as follows:

$scope.addMore = function() {
    var obj = JSON.parse(localStorage.getItem("toDoList"));
    SetSpinner('show');

    $.each(obj, function(i,v) {
        $scope.Information.push(v);
    });

    SetSpinner('hide');
}

I am using ng-repeat, look at my html. Am i missing something? — ThunD3eR
– ThunD3eR, Commented Aug 20, 2015 at 15:59

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Here is the angular way:

The view

<!-- Reference your `myapp` module -->
<body data-ng-app="myapp">
  
  <!-- Reference `InfoController` to control this DOM element and its children -->
  <section data-ng-controller="InfoController">

    <!-- Use `ng-click` directive to call the `$scope.showMore` method binded from the controller -->
    <!-- Use `ng-show` directive to show the button if `$scope.showMoreButton` is true, else hide it -->
    <button data-ng-click="showMore()" data-ng-show="showMoreButton">
      Show more
    </button>
    
    <div ng-repeat="info in Information" class="apartment container" style="padding-right:35px !important">
      <div class="row" style="height:100%">
        <div class="col-md-1 col-xs-12">
          <div>
            <h4 class="toDoListHeadings">Nummer</h4>
            <div style="margin-top: -15px; width:100%">
              <span class="toDoListItems number">
                {{info.orderraderid}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>
  
</body>

The module and controller

// defining angular application main module
var app = angular.module('myapp',[])  

// defining a controller in this module
// injecting $scope service to the controller for data binding with the html view 
// (in the DOM element surrounded by ng-controller directive)
app.controller('InfoController',function($scope){
  
  $scope.Information = [];
  $scope.showMoreButton = false; 
  // Bind controller method to the $scope instead of $(".showMore").on("click", function() {});
  $scope.showMore = function(){
      var obj = JSON.parse(localStorage.getItem("toDoList"));
      console.log(obj);
      console.log(obj.length);
      SetSpinner('show');
      $scope.Information.push(obj);
      SetSpinner('hide');
      //$.removeCookie("toDoList2");    
  };
  
  
  $.each(data, function (i, v) {
    if (i<= 9) $scope.Information.push(data[i]);
    if(i >= 10) cookieList.push(data[i]);
  });
  
  if (cookieList.length) {
    localStorage.setItem("toDoList", JSON.stringify(cookieList));
    
    //$(".showMore").removeClass("hidden");
    $scope.showMoreButton = true; // use $scope vars and ng-class directive instead of $(".xyz").blahBlah()
  }
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 20, 2015 at 16:15

Rémi Becheras

15.3k14 gold badges55 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ThibaudL Over a year ago

You could even replace this $.each by a angular.forEach

Rémi Becheras Over a year ago

Yes but its not required. Its just a for i in a wrapper so ... why not.

ThunD3eR Over a year ago

My question was a bit vague but you and ThibaudL answer put me on the right track. You were both correct, I should not use jquery as a click handler and should use ng-click but i guess that old habbits die hard. @ThibaudL I want you to know that i am accepting this answer because of the broader details which i found more helpful but both of you were correct. Thank you for the help! You are most welcomed to look under edits and see how i solved the issue.

Rémi Becheras Over a year ago

You're welcome. You're right about habits. While coding angular apps, think about in angular, each piece of code has its own correct place in one of the possible angular module sub-element: controller, service, filter or directive. Also you can create sub-modules for deeper modularization. Secondly, you can use jquery, but don't use jQuery selectors $('.abc') or else. Instead, you need a directive.

Rémi Becheras Over a year ago

@Ra3IDeN A complementary note about jQuery and Angular: take a look at angular.element, the bundled jqlite by angular

|

ThibaudL · Accepted Answer · 2015-08-20 16:00:13Z

4

You should not use JQuery, use ng-click to detect the click, because angular has no idea when JQuery is done and when it needs to refresh the interface

answered Aug 20, 2015 at 16:00

ThibaudL

1,0099 silver badges16 bronze badges

3 Comments

ThibaudL Over a year ago

If you really really really want to use JQuery then you need to do a $scope.$apply() to refresh your interface

ThunD3eR Over a year ago

Ive tried not using jquery as a click handler and also used $apply(). The thing that happens is that the objects i want to add in the DOM get added to the last object of the array instead of getting added to the array itself.

ThibaudL Over a year ago

I can see no reason for it to be added to the last item, can you make a code snippet or fiddle / plunkr reproducing your issue maybe ?? Otherwise at least the output

Collectives™ on Stack Overflow

Adding objects to the DOM after adding new data to the list

2 Answers 2

The view

The module and controller

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

The view

The module and controller

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related