Question

这很可能是一个简单的解决方案，但我没有成功添加计数器来显示使用ng-repeat列表中的项目数。当我使用{{lists.count}}时，它会添加一个计数器，但它会以10的倍数计算。在这个简单的购物清单应用程序中计算项目的正确方法是什么？

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

}

Answer 1

您可以使用length属性获取数组的项目数。只需使用：

{{lists.length}}

Answer 2

只需替换

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

带

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

向角度ng重复列表项添加计数器

2 个答案: