Question

我有一个对象数组，我点击按钮就可以填充这些对象。

填充此数组时，请确保我只添加10个对象。当这全部加载到dom中时，我给用户一个机会来添加更多的对象。

我是这样做的：

$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");
    });

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>

我的问题：当我向对象数组中添加对象＆＃34; $ scope.Information.push（obj）;＆＃34;我假设他们会被添加到DOM中，但他们没有，我怎么做这个角度方式？

编辑我的求助：

编辑HTML以使用ng-click，方法如下：

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

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

    SetSpinner('hide');
}

Answer 1

你不应该使用JQuery，使用ng-click来检测点击，因为angular不知道JQuery何时完成以及什么时候需要刷新界面

Answer 2

这是有角度的方式：

视图

<!-- 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>

模块和控制器

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

将新数据添加到列表后，将对象添加到DOM

2 个答案:

视图

模块和控制器