CODEWITHSUNDEEP
angularjs
jmccommas
jmccommas

Reputation: 567

Adding a counter to angular ng-repeat list items

This is most likely a simple solution, but I have been unsuccessful in adding a counter to show how many items are in a list using ng-repeat. When i use {{lists.count}} it does add a counter but it does it in multiples of 10. What is the correct way to count the items in this simple grocery list app?

<div class="container" ng-controller="shopCtrl">
<div class="col-lg-12 well">
    <h1>Grocery List</h1>
    <form class="form-inline" role="form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Enter Something" ng-model="addToList">
        </div>

        <button type="submit" class="btn btn-default" ng-click="addItem()">Submit</button>
    </form>
    <div class="col-lg-3">
        <ul class="list-unstyled listItems">
            <li>
                <a href="#">
                    <span class="badge pull-right">{{list.count}}</span>
                    Total Items
                </a>
            </li>
        </ul>
        <ul class="list-unstyled g-list">

            <li id="listed" ng-repeat="list in lists">{{list}} <button ng-click="deleteItem(list)" class="btn btn-danger sm">x</button></li>
        </ul>
    </div>
</div>


function shopCtrl($scope){
$scope.addToList;

$scope.lists = [];

$scope.addItem = function(){
    $scope.lists.push($scope.addToList);

    $scope.addToList = '';
};

$scope.deleteItem = function(deletedItem){
    var idx = $scope.lists.indexOf(deletedItem);
    $scope.lists.splice(idx,1);
};

}

Upvotes: 0

Views: 1850

Answers (2)

Pascal Le Merrer
Pascal Le Merrer

Reputation: 5981

just replace 

<span class="badge pull-right">{{list.count}}</span>

with 

<span class="badge pull-right">{{lists.length}}</span>

Upvotes: 0

Alp
Alp

Reputation: 29739

You can get the number of items of an array with the length property. Just use:

{{lists.length}}

Upvotes: 2

Related Questions