Changing/updating amout of items in ng-repeat with limitTo

Question

Changing/updating amout of items in ng-repeat with limitTo

401 Views Asked by AudioBubble At 27 July 2017 at 10:45

Lets say, I am repeating a div with using ng-repeat | limitTo:6 , (and also let say I have 5000 of them)

and when I click on the div , the div will be removed . And then there will be only 5 items shown.

How can I edit it , so that when an item from the ng-repeat list removed, the next Item will be shown ?

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

as you see here, the div will be shown only if user.isSelected = false

Original Q&A

There are 4 best solutions below

**Namdeo Karande** · Answer 1 · 2017-07-27T11:00:49.210000

Assuming you want to remove it on click of selectingUser then you can do is

Just set isslected value to true -

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

OR Remove it from deep copied array -

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

**Nitheesh** · Answer 2 · 2017-07-27T11:07:57.460000

Are you looking something like this?

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

Just use the angular limitTo property with ng-repeat. That will automatically adjust the content when an element is removed

**himanshu** · Answer 3 · 2017-07-27T12:35:24.367000

If the functionality is used in many place in project then directive can be used to achieve this

For example

let the Controller be

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

Lets create a directive that limits the ng-repeat variable and removes element on click

 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>

Working plunker Click here

**AudioBubble** · Answer 4 · 2017-07-31T06:20:04.300000

Incase your problem was not solved,like mine in this case ,

I tried something different and it worked for me ;

$scope.limiting = 6

in controller at removing function $scope.limiting++ and in your adding function $scope.limiting--

Changing/updating amout of items in ng-repeat with limitTo

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in ANGULARJS-LIMITTO

Trending Questions

Popular # Hahtags

Popular Questions