AngularJS中ng-repeat的替代方案?

时间:2017-01-10 16:01:24

标签: angularjs angularjs-ng-repeat ng-repeat

我有一个阵列,其中数千个产品和我在ng-repeat的帮助下迭代阵列,它在浏览器中正常工作,但在移动设备中产品加载速度很慢所以如何提高性能产品在移动设备上的时间。

2 个答案:

答案 0 :(得分:0)

您应该使用lazy-load概念。我的意思是scroll或点击任何按钮,加载一些数据行。

对于示例

在第一次API调用中,加载20行,然后使用API​​调用再次加载20 + 20。

有很多模块可用,如:

查看一些实时示例ngInfiniteScroll

或者您可以创建自己的。

答案 1 :(得分:0)

Public Class Form1

    Private Personobject As Person

    Public Sub New()
        ' This call is required by the designer.
        InitializeComponent()

        ' Add any initialization after the InitializeComponent() call.
        Personobject = New Person
        Personobject.Gender = GenderEnum.Male

        Dim enumType As Type = GetType(GenderEnum)
        Dim names() As String = [Enum].GetNames(enumType)

        For Each s As String In names
            ComboBox1.Items.Add(s)
        Next

        ComboBox1.DataBindings.Add("Text", Personobject, "Gender")
    End Sub

    Private Enum GenderEnum
        Male
        Female
    End Enum

    Private Class Person
        Public Property Gender As GenderEnum
    End Class

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Debug.Print(Personobject.Gender.ToString)
    End Sub
End Class

工厂代码

.controller('NoticeCtrl', function($scope, $stateParams, $state, $http, NoticeService, baseUrl) {

  $scope.items = [];

NoticeService.loadNotice().then(function(items) {
if(items != 0)
{
  $scope.items = items;
} else {
  $scope.noMoreItemsAvailable = true;
}       
});

$scope.noMoreItemsAvailable = false;
$scope.numberOfItemsToDisplay = 5;
$scope.limit = 0;

$scope.loadMore = function(limit) {
var start;
var limit;
var j;

for(var i= limit, j=0; j < $scope.numberOfItemsToDisplay; i++,j++)
{
  start = i+ 0;
  limit = $scope.numberOfItemsToDisplay;
}

$scope.limit = $scope.limit + $scope.numberOfItemsToDisplay;
NoticeService.refreshNotice(start, limit).then(function(items){
  if(items != 0)
  {
    $scope.items = $scope.items.concat(items);
  } else {
    $scope.noMoreItemsAvailable = true;
  }

  $scope.$broadcast('scroll.infiniteScrollComplete');
});
  };

})

您的HTML部分

   

.factory('NoticeService', function($http , $stateParams, baseUrl){
  var BASE_URL = baseUrl+"api_method=notice.list&api_version=1.0&app_key=12345&user_id="+$stateParams.userId
  var items = [];

  return {
    loadNotice: function(){
     var start = 0;
    var limit = 4;
  return $http.get(BASE_URL+"&start="+start+"&limit="+limit).then(function(response){
    items = response.data.responseMsg;
    return items;
  });
},
refreshNotice: function(starts, limits){
  return $http.get(BASE_URL+"&start="+starts+"&limit="+limits).then(function(response){
    items = response.data.responseMsg;
    return items;
      });
  }
    }
    })

我希望这会对你有所帮助: - )