AngularJs: remove element from array on decreasing count

Question

I have the following AngularJs code to change the number of items based on the count.

   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
      <script type="text/javascript">
        var app = angular.module("sub", [], function() {});
        app.controller("my_ctrl", function($scope) {
          $scope.range = function(n) {
            return new Array(n);
          };
          $scope.submit = function() {
            console.log($scope.config);
          };
        });
      </script>
    </head>
    <body ng-app="sub" ng-controller="my_ctrl">
      <form ng-submit="submit()">
        item count:
        <input type="number" min="0" max="10" ng-model="config.no_of_items"/>
        <div ng-repeat="i in range(config.no_of_items) track by $index">
          item name:
          <input name="item" ng-model="config.items[$index]"/>
        </div>
        <input type="submit"></input>
      <form>
    </body>

It's working when I increase the count and add new items.

But when I decrease the count, the number of input boxes changes, but the element is not removed from the items array.

How do I achieve that?

Then use an "on change listener" on your number input and manually set the array length when it's triggered... — Julo0sS
– Julo0sS, Commented Aug 24, 2017 at 13:23
@Julo0sS, I thought about it, but I need to do this in lot of places. If there's no simple alternative, I'll do this :) — Thirupathi Thangavel
– Thirupathi Thangavel, Commented Aug 24, 2017 at 13:36

Vivz · Accepted Answer · 2017-08-24 13:41:57Z

2

You can rewrite your code using ng-change. So whenever you change the input, an equal number of objects corresponding the count entered will be created and ng-repeat will loop over this.

var app = angular.module("sub", [], function() {});
app.controller("my_ctrl", function($scope) {
    $scope.range = function(count) {
        $scope.config = {
            items: []
        };
        for (var i = 0; i < count; i++) {
            $scope.config.items.push({});
        }
    };
    $scope.submit = function() {
        console.log($scope.config);
    };
});

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-app="sub" ng-controller="my_ctrl">
    <form ng-submit="submit()"> item count:
        <input type="number" min="0" max="10" ng-model="config.no_of_items" ng-change="range(config.no_of_items)" />
        <div ng-repeat="i in config.items track by $index"> item name:
            <input name="item" ng-model="i.name" /> </div>
        <input type="submit" />
        <form>
</body>

edited Aug 24, 2017 at 13:41

answered Aug 24, 2017 at 13:35

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thirupathi Thangavel Over a year ago

I'm calling the range function in lot of places, so will pass the array name also as an argument and try it. Thanks :)

Vivz Over a year ago

When you are reducing the value of count and if you know from which index the array should be spliced, then you don't have to reinitialize the arry in range function. You can just splice off the array from a particular index

Alex Naish · Accepted Answer · 2017-08-24 13:29:03Z

-1

You can use the angular limitTo filter on your ng-repeat which should do exactly what you need to do.

<div ng-repeat="item in config.items track by $index | limitTo: config.no_of_items">
   item name: <input name="item" ng-model="item" />
</div>

The above might not work exactly (been a while since I used Angular 1.x) but its what I would use.

answered Aug 24, 2017 at 13:29

Alex Naish

1207 bronze badges

2 Comments

Thirupathi Thangavel Over a year ago

Thanks for the reply, but it still doesn't remove the element on decreasing count.

Alex Naish Over a year ago

So you're wanting to actually remove the item from the array - not just hide it from view? Then yes - in that case you'll need the ng-change directive set on the config.no_of_items input.

Collectives™ on Stack Overflow

AngularJs: remove element from array on decreasing count

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related