CODEWITHSUNDEEP
javascriptjqueryangularjs
ThunD3eR
ThunD3eR

Reputation: 3456

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

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');
}

Upvotes: 3

Views: 63

Answers (2)

R&#233;mi Becheras
R&#233;mi Becheras

Reputation: 15222

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()
  }
});

Upvotes: 4

ThibaudL
ThibaudL

Reputation: 1009

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

Upvotes: 4

Related Questions