CODEWITHSUNDEEP
javascripthtmlangularjsarrays
tryingmybest
tryingmybest

Reputation: 27

AngularJS advice on how to fix a bug when pushing two of the same strings into the array

I'm having trouble trying to figure out how to fix a bug that happens when I try to push the same string as added previously to the array. It gets stuck and will not allow the app to post another string.

How do I make sure that your repeat doesn't get stuck when there two of the same values in the array?

Bug Example Screenshot enter image description here --> Bug happens when I try to push "1"into the array again after a "1" is already posted.

HTML Code

 <body> 
    <div data-ng-controller="appController" class="container"> 
        <div class="row">
            <form> 

                <label for = "status"> Status: </label>

                <input data-ng-model = "input_data" type="text" id="status"/>

                <button data-ng-click="add_data()"> OK </button>

                <ul class = "list-group">
                    <li class="list-group-item" data-ng-repeat="x in array_data">

                        {{x}}

                        <button data-ng-click = "remove_data($index)">DEL</button>
                    </li>
                </ul>
            </form>
        </div>
    </div>

     <script src="framework/js/jquery.min.js"></script>
    <!-- All Bootstrap plug-ins file -->
    <script src="framework/js/bootstrap.min.js"></script>
    <!-- Basic AngularJS -->
    <script src="framework/js/angular.min.js"></script>
    <!-- Your Controller -->
    <script src="framework/js/appstatpost.js"></script>
</body>

AngularJS code 

var app = angular.module("myApp", []);

app.controller("appController", function ($scope) {
    $scope.array_data = [];

    $scope.add_data = function () {
        $scope.array_data.push($scope.input_data);
    };

    $scope.remove_data = function (index) {
        $scope.array_data.splice(index, 1);
    };
});

Upvotes: 1

Views: 195

Answers (1)

Ben
Ben

Reputation: 2706

You could use track by $index, example:

<li class="list-group-item" data-ng-repeat="x in array_data track by $index">

AngularJS tries by default to find a key in your array to index by. Normally this works well, but if you have duplicates then you have to tell AngularJS to make a new index, in this case, $index.

Upvotes: 2

Related Questions