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

Question

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

What is happening for you after an element is removed from the array? — Nitheesh, Jul 27 '17 at 12:00
When an Element is removed from the array, I have only 4 elements left.(in case i add limitTo:5 ) . adn then 3, and then 2.... the next elements will never be added, unfortunately — , Jul 27 '17 at 12:35

Nitheesh · Answer 1 · 2017-07-27T11:17:41.220

1

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

edited Jul 27 '17 at 11:17

answered Jul 27 '17 at 11:07

Nitheesh

19,238
3
22
49

This is exactly what I search for, when I add the same, It doesnt load the new items tho – Jul 27 '17 at 11:21
Unfortunately I can't as it is from my work, and it has tons of dependencies on it.... `

` but this was what I tried. – Jul 27 '17 at 11:27
What do you mean with using limitTo filter? If you mean , adding `| limitTo:5 ` in my ng-repeat , then yes I tried it. is there any other way to use that filter? – Jul 27 '17 at 11:38
No it doesn't :( – Jul 27 '17 at 11:54

score 0 · Answer 2 · answered Jul 27 '17 at 11:00

0

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

answered Jul 27 '17 at 11:00

Namdeo Karande

403
1
3
19

I already have that function , I am sorry I think I couldn't explain my problem well. I ALWAYS want my ng repeat to show 6 options, if I delete one, the 7. option should be added – Jul 27 '17 at 11:05

score 0 · Answer 3 · answered Jul 27 '17 at 12:35

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

score 0 · Answer 4 · answered Jul 31 '17 at 06:20

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

4 Answers4