Question

让我们说，我正在使用div重复ng-repeat | limitTo:6，（并且还说我有5000个）

当我点击div时，div将被删除。然后将只显示5个项目。

如何编辑它，以便当删除ng-repeat列表中的项目时，将显示下一个项目？

    <div class = "col-xs-12">
        <!-- selectingUser(user) ;  -->
        <div ng-if="!user.isSelected" data-ng-click = "selectingUser(user)" data-ng-repeat="user in users " > <!-- | filter:$select.search  -->
            <img class="img-circle" data-ng-src ="{{user.image}}" width="8%"/>
            <span  data-ng-bind-html="user.name" ></span>
        </div>
    </div>

如您所见，

仅在user.isSelected = false

时显示div

Answer 1

你看起来像这样吗？

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <div ng-repeat="item in sampleArray | limitTo:5" ng-click="removeItem($index)">{{item}}</div>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.sampleArray = ["Obj1", "Obj2", "Obj3", "Obj4", "Obj5", "Obj6", "Obj7", "Obj8", "Obj9", "Obj10"];
            $scope.removeItem = function(index){
                console.log("removing item at" + (index+1));
                $scope.sampleArray.splice(index, 1);
            }
        });
    </script>

</body>

</html>

只需将limitTo属性与ng-repeat一起使用即可。这将在删除元素时自动调整内容

Answer 2

假设你想在点击选择用户时将其删除，那么你可以做到

只需将已选择的值设置为true -

$scope.selectingUser=function(data){
   angular.forEach($scope.users , function(value, key){
      if(data.id == value.id)
       value.isSelected = true;
    });
}

或从深度复制的数组中删除它 -

$scope.selectingUser=function(data){
 angular.forEach($scope.users , function(value, key){
  if(data.id == value.id)
     $scope.users.slice(key);
});
}

Answer 3

如果在项目中的许多地方使用该功能，那么可以使用指令来实现此目的

例如

让控制器

   app.controller('MainCtrl', function($scope) {
      $scope.data = [{"id":1,"value":"one"},{"id":2,"value":"two"},{"id":3,"value":"three"},
      {"id":4,"value":"four"},{"id":5,"value":"five"},{"id":6,"value":"six"},
      {"id":7,"value":"seven"},{"id":8,"value":"eight"},{"id":9,"value":"nine"},
      {"id":10,"value":"ten"},{"id":11,"value":"eleven"},{"id":12,"value":"twelve"}]
    });

让我们创建一个限制ng-repeat变量的指令，并删除点击

上的元素

 app.directive('dirDemo', function ($filter) {
        return {
        scope: {
            data: '=',
            limit:'='
        },
       template: '<div ng-repeat="val in limitedData" ng-click=Remove($index)>{{val.value}}</div>',
            link: function (scope, element, attrs) {
                scope.limitedData=   $filter('limitTo')(scope.data, scope.limit, 0);

                 scope.Remove=function(index){
                   scope.GetLimitedArray(index);
                   scope.TrimArray();
                 }

                 scope.GetLimitedArray=function(index){
                   scope.data.splice(index,1);
                 }

                 scope.TrimArray=function(){
                   if(+scope.limit>0){
                   scope.limitedData= $filter('limitTo')(scope.data, scope.limit, 0);
                 }
                 }
          }
          }
        });

HTML

<body ng-controller="MainCtrl">
    <dir-demo data="data" limit="5"></dir-demo>
  </body>

工作人员Click here

Answer 4

请问你的问题没有解决，就像我的情况一样，

我尝试了不同的东西，它对我有用;

$scope.limiting = 6

在控制器中移除功能$scope.limiting++并在您的添加函数$scope.limiting--

使用limitTo更改/更新ng-repeat中项目的数量

4 个答案: